React中使用react-player播放視頻或直播的方法是什么

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是播放地址，可以動態更改，但一定要在渲染之前加載
其余的方法可以在官網查看文檔

補充：react-player一個很好用的直播組件，可以播放視頻等等

一個很好用的直播組件，可以播放視頻等等

import React from 'react';
import ReactPlayer from 'react-player'
class LiveBroadcast extends React.Component {
    render() {
        return (
            <ReactPlayer
                className='react-player'
                url='....flv'
                width='100%'
                height='100%'
                playing={true}
                controls
            />
        )
    }
}
export default LiveBroadcast

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。