React中使用react-player 播放視頻或直播

業務中需要播放視頻，尋來尋去，找到了react-player

初次點擊，甚是眼熟，思來想去，竟是釘釘同款

如果使用react框架 先安裝

npm install --save video-react react react-dom redux

1.引入video-react以及CSS
css一定不要忘記引用 否則會出現樣式丟失和奇奇怪怪的情況 切記

 

import "video-react/dist/video-react.css";
import { Player, ControlBar } from 'video-react';

video-react提供了很多ControlBar組件 可以查看官方文檔進行引用 比如倍速等等

 2.創建實例

          <Modal
            title="我是title"
            forceRender={true}
            visible={this.state.videoVisible}
            onOk={this.handleCancel}
            onCancel={this.handleCancel}>
            <Player
              ref={player => {
                this.player = player;
              }}
              preload='none'
            >
              <ControlBar autoHide={false} className="my-class" />
              <source src={this.state.source} />
            </Player>
          </Modal>

這里的source src是播放地址，可以動態更改，但一定要在渲染之前加載
其余的方法可以在官網查看文檔

更多文章請移步我的博客，https://blog.nwctwang.top