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è)標注、版本號 */}
<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="標注結(jié)果">
<Input style={{height:80}} placeholder="標注結(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 hooks進行單元測試的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文主要介紹了React+Ts實現(xiàn)二次封裝組件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07
React報錯之Parameter event implicitly has a
這篇文章主要為大家介紹了React報錯之Parameter event implicitly has an any type，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了React?Hooks實現(xiàn)的中文輸入組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
本文主要介紹了react為什么不推薦使用index作為key，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細介紹了React實現(xiàn)評論的添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
create-react-app中添加less支持的實現(xiàn)
這篇文章主要介紹了react.js create-react-app中添加less支持的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼
本篇文章主要介紹了react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼，具有一定的參考價值，有興趣的可以了解下2017-09-09