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

更新時(shí)間：2022年01月24日 11:00:06 作者：skywa1ker

這篇文章主要介紹了React中使用react-player 播放視頻或直播，本文教大家如何使用react框架及創(chuàng)建實(shí)例的代碼,本文內(nèi)容簡短給大家介紹的非常詳細(xì)，需要的朋友可以參考下

業(yè)務(wù)中需要播放視頻，尋來尋去，找到了react-player

初次點(diǎn)擊，甚是眼熟，思來想去，竟是釘釘同款

如果使用react框架先安裝

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

1.引入video-react以及CSS

css一定不要忘記引用否則會(huì)出現(xiàn)樣式丟失和奇奇怪怪的情況切記

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

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

2.創(chuàng)建實(shí)例

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

補(bǔ)充：react-player一個(gè)很好用的直播組件，可以播放視頻等等

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

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

到此這篇關(guān)于React中使用react-player 播放視頻或直播的文章就介紹到這了,更多相關(guān)React播放視頻或直播內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

webpack入門+react環(huán)境配置
webpack是一個(gè)前端資源模塊化管理和打包工具，說白了就是方便我們管理自己的常用的一些代碼，比如你開發(fā)中用到sass以及jade同時(shí)用到es6，開發(fā)時(shí)你不可能改動(dòng)某個(gè)地方就挨個(gè)命令去轉(zhuǎn)換再到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多余的步驟。
2017-02-02
React Markdown配置示例
React-Markdown 是一個(gè)基于 React 的 Markdown 渲染組件庫,其核心設(shè)計(jì)理念是通過 Unified 生態(tài)系統(tǒng)實(shí)現(xiàn)安全、可擴(kuò)展的 Markdown 解析
2025-04-04
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
在React中實(shí)現(xiàn)txt文本文件預(yù)覽的完整指南
在前端開發(fā)中,從遠(yuǎn)程 URL 加載并預(yù)覽文本文件是一項(xiàng)實(shí)用且常見的功能,今天,我將帶你深入剖析一個(gè) React 組件 TextViewerURL,它通過 URL 加載文本文件,支持多種編碼）,并搭配精心設(shè)計(jì)的樣式,讓文本展示更美觀、交互更友好,感興趣的小伙伴跟著小編一起來看看吧
2025-03-03
JavaScript中React 面向組件編程（下）
在React面向組件編程中，除了上一章節(jié)的組件實(shí)例的三大核心屬性以外，還有很多重要的內(nèi)容比如：React 的生命周期，受控組件與非受控組件，高階函數(shù)和函數(shù)柯里化的理解等，在本文中會(huì)給大家繼續(xù)講解React 面向組件編程中剩余的內(nèi)容
2023-03-03
React庫之react-beautiful-dnd介紹及其使用過程
在使用React構(gòu)建Web應(yīng)用程序時(shí),拖拽功能是一項(xiàng)常見需求,為了方便實(shí)現(xiàn)拖拽功能,我們可以借助第三方庫react-beautiful-dnd,本文將介紹react-beautiful-dnd的基本概念,并結(jié)合實(shí)際的項(xiàng)目代碼一步步詳細(xì)介紹其使用過程,需要的朋友可以參考下
2023-11-11
React插槽使用方法
本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
React?Router掌握路由搭建與權(quán)限管控的操作方法(?從入門到精通)
本文詳細(xì)介紹了React?Router庫在React應(yīng)用開發(fā)中的應(yīng)用,包括其核心功能、安裝使用、基礎(chǔ)使用、核心組件和功能、路由參數(shù)和嵌套路由、編程式導(dǎo)航以及路由權(quán)限管理等方面,感興趣的朋友一起看看吧
2025-01-01
在React中實(shí)現(xiàn)分塊導(dǎo)出大量數(shù)據(jù)表格并壓縮成圖片的解決方案
在現(xiàn)代Web開發(fā)中,處理和展示大量數(shù)據(jù)是一個(gè)常見的挑戰(zhàn),特別是在使用React框架時(shí),我們經(jīng)常需要將這些數(shù)據(jù)以表格的形式展示,并提供導(dǎo)出功能,本文將介紹如何在React中實(shí)現(xiàn)一個(gè)高效、分塊導(dǎo)出大量數(shù)據(jù)表格,并將其壓縮為圖片的解決方案,需要的朋友可以參考下
2024-12-12
react組件中獲取DOM元素的五種方式
本文主要介紹了React組件中獲取DOM元素的五種方式：包括使用ref屬性、構(gòu)造器創(chuàng)建全局變量、動(dòng)態(tài)綁定ref屬性、綁定函數(shù)定義全局變量和使用hook語法查找DOM,感興趣的可以了解一下
2025-01-01