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 class="lazy" data-src={this.state.source} />            </Player>          </Modal>

这里的source class="lazy" data-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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。