React中使用react-player 播放视频或直播的方法
更新时间：2022年01月24日 11:00:06 作者：skywa1ker
这篇文章主要介绍了React中使用react-player 播放视频或直播，本文教大家如何使用react框架及创建实例的代码,本文内容简短给大家介绍的非常详细，需要的朋友可以参考下
业务中需要播放视频，寻来寻去，找到了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到此这篇关于React中使用react-player 播放视频或直播的文章就介绍到这了,更多相关React播放视频或直播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换再到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤。2017-02-02
React-Markdown 是一个基于 React 的 Markdown 渲染组件库,其核心设计理念是通过 Unified 生态系统实现安全、可扩展的 Markdown 解析2025-04-04
React-Hooks之useImperativeHandler使用介绍
这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
在前端开发中,从远程 URL 加载并预览文本文件是一项实用且常见的功能,今天,我将带你深入剖析一个 React 组件 TextViewerURL,它通过 URL 加载文本文件,支持多种编码）,并搭配精心设计的样式,让文本展示更美观、交互更友好,感兴趣的小伙伴跟着小编一起来看看吧2025-03-03
在React面向组件编程中，除了上一章节的组件实例的三大核心属性以外，还有很多重要的内容比如：React 的生命周期，受控组件与非受控组件，高阶函数和函数柯里化的理解等，在本文中会给大家继续讲解React 面向组件编程中剩余的内容2023-03-03
React库之react-beautiful-dnd介绍及其使用过程
在使用React构建Web应用程序时,拖拽功能是一项常见需求,为了方便实现拖拽功能,我们可以借助第三方库react-beautiful-dnd,本文将介绍react-beautiful-dnd的基本概念,并结合实际的项目代码一步步详细介绍其使用过程,需要的朋友可以参考下2023-11-11
本文主要介绍了React插槽使用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
React Router掌握路由搭建与权限管控的操作方法( 从入门到精通)
本文详细介绍了React Router库在React应用开发中的应用,包括其核心功能、安装使用、基础使用、核心组件和功能、路由参数和嵌套路由、编程式导航以及路由权限管理等方面,感兴趣的朋友一起看看吧2025-01-01
在React中实现分块导出大量数据表格并压缩成图片的解决方案
在现代Web开发中,处理和展示大量数据是一个常见的挑战,特别是在使用React框架时,我们经常需要将这些数据以表格的形式展示,并提供导出功能,本文将介绍如何在React中实现一个高效、分块导出大量数据表格,并将其压缩为图片的解决方案,需要的朋友可以参考下2024-12-12
本文主要介绍了React组件中获取DOM元素的五种方式：包括使用ref属性、构造器创建全局变量、动态绑定ref属性、绑定函数定义全局变量和使用hook语法查找DOM,感兴趣的可以了解一下2025-01-01
最新评论