日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中使用react-player?播放視頻或直播的方法_React

作者：skywa1ker ? 更新時間： 2022-04-06 編程語言

業務中需要播放視頻，尋來尋去，找到了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

原文鏈接：https://www.cnblogs.com/wz0130/p/15838549.html

欄目分類
最近更新