react-player實現(xiàn)視頻播放與自定義進度條效果
更新時間：2022年01月24日 11:10:42 作者：qq_41315539
本篇文章通過完整的代碼給大家介紹了react-player實現(xiàn)視頻播放與自定義進度條效果，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
環(huán)境
react.js ant design pro 4.0
實現(xiàn)效果
代碼
import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Col ,Row,Button,Form,Input,Card,Slider,Select,message} from 'antd';
import {CaretRightOutlined,PauseOutlined } from '@ant-design/icons';
import ReactPlayer from 'react-player'
const formItemLayout = {
labelCol: { span: 4,},
wrapperCol: { span: 20},
};
// 上一條按鈕樣式
const prevStyle={ float: 'left', width: '160px', fontWeight: 'bold', }
// 廢棄按鈕樣式
const abandonStyle={ float: 'right', marginRight: '15%', width: '120px', color: '#FF0F0F', borderColor: '#FF0F0F', fontWeight: 'bold', }
// 完成按鈕樣式
const finishStyle={ float: 'left', marginLeft: '15%', width: '120px', color: '#56CB8B', borderColor: '#56CB8B', fontWeight: 'bold', }
// 下一條按鈕樣式
const nextStyle={ float: 'right', width: '160px', fontWeight: 'bold', }
// 計時器
let interval
// 數(shù)據(jù)回流編輯頁
export default class OperationEdit extends React.Component{
state={
slideValue:0, // 進度條當(dāng)前取值
playing:false, // 視頻true播放 false暫停
playbackRate:1, // 視頻播放倍速
timeConsuming:0, // 本頁耗時
duration:0, // 視頻總時長
controllerTimeConsuming:true, // 本頁計時開關(guān) true:計時中 false:計時暫停
}
// 初始化啟動計時器
componentDidMount(){
interval = setInterval(this.addTimeConsuming, 1000)
// 操作視頻播放組件的對象
ref = player => { this.player = player }
// 本頁耗時 計時
addTimeConsuming = () =>{
const {timeConsuming} = this.state
this.setState({timeConsuming:timeConsuming+1})
// 時間格式化
formatTimeConsuming = val =>{
const formateDate = parseInt(val,0) || this.state.timeConsuming
if(formateDate>60){
const m = parseInt((formateDate/60),0) // 分鐘
const s = formateDate - 60*m // 秒
let res = ""
if(m<10){res +=`0${m}:`}else{res +=`${m}:`}
if(s<10){res +=`0${s}`}else{res +=`${s}`}
return res
}
if(formateDate<10){
return `00:0${formateDate}`
return `00:${formateDate}`
// 視頻進度條改變
handleSliderChange = value => {
this.setState({ slideValue: value}) // 設(shè)置進度條當(dāng)前值
this.player.seekTo(parseFloat(value)) // 改變視頻進度
};
// 設(shè)置視頻播放倍速
handleVideoSpeedChange = value =>{
this.setState({playbackRate:value})
// 視頻總時長
handleDuration = (duration) => {
this.setState({ duration })
// 清除計時器 或繼續(xù)啟用計時器
changeInterval = controllerTimeConsuming =>{
if(controllerTimeConsuming){ // 開始計時
interval = setInterval(this.addTimeConsuming, 1000)
}else{ // 暫停計時
clearInterval(interval);
this.setState({controllerTimeConsuming})
// 當(dāng)前播放進度
handleProgress = state => {
this.setState({slideValue:parseFloat(state.playedSeconds)})
render(){
const {slideValue,duration,playing,playbackRate,controllerTimeConsuming} = this.state
return(
<PageHeaderWrapper>
<Card style={{padding:'0px',marginBottom:15}}>
{/* 視頻、右側(cè)標(biāo)注、版本號 */}
<Row gutter={24}>
{/* 視頻 */}
<Col span={10}>
<Row gutter={24}>
{/* <div style={{height:300,width:'100%',border:'1px solid #000'}}> */}
<ReactPlayer
ref={this.ref}
height="300px"
style={{width:"100%",}}
url='https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'
playing={playing}
playbackRate={playbackRate}
onDuration={this.handleDuration}
// onSeek={e => console.log('onSeek', e)} // 當(dāng)媒體使用seconds參數(shù)搜索時調(diào)用
progressInterval={100} // onProgress 回調(diào)的速度 太大會導(dǎo)致進度條走動不平滑
onProgress={this.handleProgress}
onError={e => message.error(e)} // 視頻播放錯誤
// controls // 設(shè)置為true或false顯示本機播放器控件
/>
{/* </div> */}
</Row>
<Row gutter={24} style={{marginTop:'10px',textAlign:"center"}}>
<Col span={8}>
<Button onClick={()=>this.setState({playing:!playing})}>{playing?"暫停":"播放"}</Button>
</Col>
<Button>跳過重復(fù)</Button>
<Select showArrow={false} // 不顯示小箭頭
defaultValue={playbackRate} onChange={this.handleVideoSpeedChange}
>
<Select.Option value={0.5}>0.5x</Select.Option>
<Select.Option value={0.75}>0.75x</Select.Option>
<Select.Option value={1}>倍速</Select.Option>
<Select.Option value={1.25}>1.25x</Select.Option>
<Select.Option value={1.5}>1.5x</Select.Option>
<Select.Option value={2}>2x</Select.Option>
</Select>
</Row>
</Col>
{/* 靜態(tài)圖 */}
<Col span={12}>
{/* <Row gutter={24}>
<Col span={4}>靜態(tài)圖</Col>
<Col span={20}>
<div style={{height:100,width:'100%',border:'1px solid #000'}}>
幀圖片
</div>
</Row> */}
<Form {...formItemLayout} >
<Row gutter={24}>
<Col span={24}>
<Form.Item name="zhenPhoto" label="靜態(tài)圖">
<Input style={{height:80}} placeholder="請輸入靜態(tài)圖" />
</Form.Item>
</Col>
</Row>
<Form.Item name="distinguishResult" label="識別結(jié)果">
<Input style={{height:80}} placeholder="請輸入識別結(jié)果" />
<Form.Item name="markResult" label="標(biāo)注結(jié)果">
<Input style={{height:80}} placeholder="標(biāo)注結(jié)果" />
</Form>
{/* 版本號 */}
<Col span={2}>
<Row gutter={24} style={{height:100}}><Col span={24}><Button>V1.0.01</Button></Col></Row>
<Row gutter={24} style={{height:100}}><Col span={24}><Button>V1.0.00</Button></Col></Row>
</Row>
{/* 進度條與幀圖 */}
<Row gutter={24} style={{height:200}}>
<Col span={22}>
{/* 進度條 */}
<div style={{border:'1px solid red',height:'180px'}} />
<Slider
style={{marginBottom:10}} value={slideValue} max={duration}
step={0.01} onChange={this.handleSliderChange}
tipFormatter={val=>this.formatTimeConsuming(val)}
/>
{/* 狀態(tài)切換按鈕 */}
<Row gutter={24} style={{height:80}}>
<Row gutter={24} style={{textAlign:'center'}}>
<Col span={12} style={{textAlign:"left"}}>
<Button size="large" style={prevStyle}>上一條</Button>
<Button size="large" style={abandonStyle}>廢棄</Button>
<Col span={12}>
<Button size="large" style={finishStyle}>完成</Button>
<Button size="large" style={nextStyle}>下一條</Button>
{/* 任務(wù)計時 */}
<Row gutter={22} >
<Col span={5}>
<div style={{float:'left'}}> <Button>本頁耗時：{this.formatTimeConsuming()}</Button> </div>
<div style={{float:'left'}}>
{controllerTimeConsuming?
<PauseOutlined onClick={()=>this.changeInterval(false)} style={{color:"#1296DB",fontSize:30}}/>
:<CaretRightOutlined onClick={()=>this.changeInterval(true)} style={{color:"#1296DB",fontSize:30}} />}
</div>
<Col span={12} style={{textAlign:'center'}}><span style={{fontSize:'20px',fontWeight: 'bold'}}>32 / 100</span></Col>
<Col span={5} style={{textAlign:'right'}}><Button>總耗時：08:25</Button></Col>
</Card>
</PageHeaderWrapper>
)
}到此這篇關(guān)于react-player實現(xiàn)視頻播放與自定義進度條效果的文章就介紹到這了,更多相關(guān)react-player視頻播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于React和antd實現(xiàn)自定義進度條的示例代碼
在現(xiàn)代 Web 開發(fā)中,進度條是一種常見且實用的 UI 組件,用于直觀地向用戶展示任務(wù)的完成進度,本文將詳細介紹如何使用 React 來構(gòu)建一個自定義的進度條,它不僅能夠動態(tài)展示進度,還具備額外的信息提示功能,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了詳解React 的幾種條件渲染以及選擇，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了React的diff算法核心復(fù)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React中使用Workbox進行預(yù)緩存的實現(xiàn)代碼
Workbox是Google Chrome團隊推出的一套 PWA 的解決方案,這套解決方案當(dāng)中包含了核心庫和構(gòu)建工具,因此我們可以利用Workbox實現(xiàn)Service Worker的快速開發(fā),本文小編給大家介紹了React中使用Workbox進行預(yù)緩存的實現(xiàn),需要的朋友可以參考下2023-11-11
最近在學(xué)習(xí)React，學(xué)習(xí)到了列表渲染這一塊，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于React學(xué)習(xí)筆記之列表渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要為大家介紹了hooks寫React組件的5個需要注意的細節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了react實現(xiàn)Radio組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
react中fetch之cors跨域請求的實現(xiàn)方法
本篇文章主要介紹了react中fetch之cors跨域請求的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了在react里面如何封裝一個通用的Ellipsis組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12