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)文章
react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了React三大屬性之props的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
React?高階組件與Render?Props優(yōu)缺點詳解
這篇文章主要weidajai?介紹了React?高階組件與Render?Props優(yōu)缺點詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了從react?hooks閉包陷阱切入淺談react?hooks，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了react應(yīng)用中的DOM DIFF算法，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
這篇文章主要給大家介紹了React實現(xiàn)一個拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時，默認(rèn)情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2022-10-10
這篇文章主要介紹了React?Flux與Redux設(shè)計及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個單獨的常量狀態(tài)樹（state對象）保存這一整個應(yīng)用的狀態(tài)，這個對象不能直接被改變2023-03-03