react视频播放组件

安装

npm install –save video-react

使用

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

页面

<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>

隐藏进度条、禁用点击控制播放器

<Player ref={ref => this.player = ref}
        playsInline
        autoPlay={true}
        src={URL}>
        <Shortcut clickable={false}
                  dblclickable={false}/>
        <BigPlayButton position="center"/>
        <ControlBar className="controlBar" autoHide={true}
                    disableDefaultControls={true}/>
</Player>

属性链接：video-react.js.org/components/…

来源链接：blog.csdn.net/weixin_4443…