React中使用react-player 播放視頻或直播的方法
更新時間：2022年01月24日 11:00:06 作者：skywa1ker
這篇文章主要介紹了React中使用react-player 播放視頻或直播，本文教大家如何使用react框架及創(chuàng)建實例的代碼,本文內(nèi)容簡短給大家介紹的非常詳細(xì)，需要的朋友可以參考下
業(yè)務(wù)中需要播放視頻，尋來尋去，找到了react-player
初次點擊，甚是眼熟，思來想去，竟是釘釘同款
如果使用react框架 先安裝
npm install --save video-react react react-dom redux
1.引入video-react以及CSS
css一定不要忘記引用 否則會出現(xiàn)樣式丟失和奇奇怪怪的情況 切記
import "video-react/dist/video-react.css";
import { Player, ControlBar } from 'video-react';video-react提供了很多ControlBar組件 可以查看官方文檔進(jìn)行引用 比如倍速等等
2.創(chuàng)建實例
<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是播放地址，可以動態(tài)更改，但一定要在渲染之前加載
其余的方法可以在官網(wǎng)查看文檔
補充：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到此這篇關(guān)于React中使用react-player 播放視頻或直播的文章就介紹到這了,更多相關(guān)React播放視頻或直播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
webpack是一個前端資源模塊化管理和打包工具，說白了就是方便我們管理自己的常用的一些代碼，比如你開發(fā)中用到sass以及jade同時用到es6，開發(fā)時你不可能改動某個地方就挨個命令去轉(zhuǎn)換再到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多余的步驟。2017-02-02
React-Markdown 是一個基于 React 的 Markdown 渲染組件庫,其核心設(shè)計理念是通過 Unified 生態(tài)系統(tǒng)實現(xiàn)安全、可擴展的 Markdown 解析2025-04-04
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
在React中實現(xiàn)txt文本文件預(yù)覽的完整指南
在前端開發(fā)中,從遠(yuǎn)程 URL 加載并預(yù)覽文本文件是一項實用且常見的功能,今天,我將帶你深入剖析一個 React 組件 TextViewerURL,它通過 URL 加載文本文件,支持多種編碼）,并搭配精心設(shè)計的樣式,讓文本展示更美觀、交互更友好,感興趣的小伙伴跟著小編一起來看看吧2025-03-03
在React面向組件編程中，除了上一章節(jié)的組件實例的三大核心屬性以外，還有很多重要的內(nèi)容比如：React 的生命周期，受控組件與非受控組件，高階函數(shù)和函數(shù)柯里化的理解等，在本文中會給大家繼續(xù)講解React 面向組件編程中剩余的內(nèi)容2023-03-03
React庫之react-beautiful-dnd介紹及其使用過程
在使用React構(gòu)建Web應(yīng)用程序時,拖拽功能是一項常見需求,為了方便實現(xiàn)拖拽功能,我們可以借助第三方庫react-beautiful-dnd,本文將介紹react-beautiful-dnd的基本概念,并結(jié)合實際的項目代碼一步步詳細(xì)介紹其使用過程,需要的朋友可以參考下2023-11-11
本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下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中實現(xiàn)分塊導(dǎo)出大量數(shù)據(jù)表格并壓縮成圖片的解決方案
在現(xiàn)代Web開發(fā)中,處理和展示大量數(shù)據(jù)是一個常見的挑戰(zhàn),特別是在使用React框架時,我們經(jīng)常需要將這些數(shù)據(jù)以表格的形式展示,并提供導(dǎo)出功能,本文將介紹如何在React中實現(xiàn)一個高效、分塊導(dǎo)出大量數(shù)據(jù)表格,并將其壓縮為圖片的解決方案,需要的朋友可以參考下2024-12-12
本文主要介紹了React組件中獲取DOM元素的五種方式：包括使用ref屬性、構(gòu)造器創(chuàng)建全局變量、動態(tài)綁定ref屬性、綁定函數(shù)定義全局變量和使用hook語法查找DOM,感興趣的可以了解一下2025-01-01