React中插入视频(video-react)，自动播放

深藏阁楼爱情的钟 2022-11-13 02:00 159阅读 0赞

一. 在react中引入

1.  安装插件

npm install –save video-react

2.在文件中引入

import {
      Player,
      ControlBar,
      PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
      ReplayControl, // 后退按钮
      ForwardControl,  // 前进按钮
      CurrentTimeDisplay,
      TimeDivider,
      PlaybackRateMenuButton,  // 倍速播放选项
      VolumeMenuButton
    } from 'video-react';
    import "video-react/dist/video-react.css"; // import css

二. 插件属性  
1.[插件属性地址][Link 1]

遇到的问题，视频要求自动播放，设置autoPlay为`true`。在测试时候发现，切换Tab标签的时候，不会自动播放。  
解决方案：在更改数据的时候调用load方法。

this.player.subscribeToStateChange(this.handleStateChange.bind(this));
     this.player.load();//  更改视频源并重新加载视频

部分代码：

this.player.subscribeToStateChange(this.handleStateChange.bind(this));
     this.player.load();
     
     handleStateChange(state, prevState) {
        this.setState({
          player: state,
          currentTime: state.currentTime,
          duration:state.duration,
        });
      }

界面

<Player
                ref={c => {
                  this.player = c;
                }}
                autoPlay='true'
                playsInline ='true'
                src={this.state.videoUrl}
                poster="https://video-react.js.org/assets/poster.png"
              >
                
                <ControlBar autoHide={false} disableDefaultControls={source == 0?false :true}>
                  <ReplayControl seconds={10} order={1.1} />
                  <PlayToggle />
                  <CurrentTimeDisplay order={4.1} />
                  <TimeDivider order={4.2} />
                  <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
                  <VolumeMenuButton />
                </ControlBar>
              </Player>

[Link 1]: https://video-react.js.org/components/player/