react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
環(huán)境
react.js ant design pro 4.0
實(shí)現(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', } // 計(jì)時(shí)器 let interval // 數(shù)據(jù)回流編輯頁 export default class OperationEdit extends React.Component{ state={ slideValue:0, // 進(jìn)度條當(dāng)前取值 playing:false, // 視頻true播放 false暫停 playbackRate:1, // 視頻播放倍速 timeConsuming:0, // 本頁耗時(shí) duration:0, // 視頻總時(shí)長(zhǎng) controllerTimeConsuming:true, // 本頁計(jì)時(shí)開關(guān) true:計(jì)時(shí)中 false:計(jì)時(shí)暫停 } // 初始化啟動(dòng)計(jì)時(shí)器 componentDidMount(){ interval = setInterval(this.addTimeConsuming, 1000) // 操作視頻播放組件的對(duì)象 ref = player => { this.player = player } // 本頁耗時(shí) 計(jì)時(shí) addTimeConsuming = () =>{ const {timeConsuming} = this.state this.setState({timeConsuming:timeConsuming+1}) // 時(shí)間格式化 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}` // 視頻進(jìn)度條改變 handleSliderChange = value => { this.setState({ slideValue: value}) // 設(shè)置進(jìn)度條當(dāng)前值 this.player.seekTo(parseFloat(value)) // 改變視頻進(jìn)度 }; // 設(shè)置視頻播放倍速 handleVideoSpeedChange = value =>{ this.setState({playbackRate:value}) // 視頻總時(shí)長(zhǎng) handleDuration = (duration) => { this.setState({ duration }) // 清除計(jì)時(shí)器 或繼續(xù)啟用計(jì)時(shí)器 changeInterval = controllerTimeConsuming =>{ if(controllerTimeConsuming){ // 開始計(jì)時(shí) interval = setInterval(this.addTimeConsuming, 1000) }else{ // 暫停計(jì)時(shí) clearInterval(interval); this.setState({controllerTimeConsuming}) // 當(dāng)前播放進(jìn)度 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)注、版本號(hà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ù)搜索時(shí)調(diào)用 progressInterval={100} // onProgress 回調(diào)的速度 太大會(huì)導(dǎo)致進(jìn)度條走動(dòng)不平滑 onProgress={this.handleProgress} onError={e => message.error(e)} // 視頻播放錯(cuò)誤 // controls // 設(shè)置為true或false顯示本機(jī)播放器控件 /> {/* </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="請(qǐng)輸入靜態(tài)圖" /> </Form.Item> </Col> </Row> <Form.Item name="distinguishResult" label="識(shí)別結(jié)果"> <Input style={{height:80}} placeholder="請(qǐng)輸入識(shí)別結(jié)果" /> <Form.Item name="markResult" label="標(biāo)注結(jié)果"> <Input style={{height:80}} placeholder="標(biāo)注結(jié)果" /> </Form> {/* 版本號(hào) */} <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> {/* 進(jìn)度條與幀圖 */} <Row gutter={24} style={{height:200}}> <Col span={22}> {/* 進(jìn)度條 */} <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ù)計(jì)時(shí) */} <Row gutter={22} > <Col span={5}> <div style={{float:'left'}}> <Button>本頁耗時(shí):{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>總耗時(shí):08:25</Button></Col> </Card> </PageHeaderWrapper> ) }
到此這篇關(guān)于react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果的文章就介紹到這了,更多相關(guān)react-player視頻播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- React videojs 實(shí)現(xiàn)自定義組件(視頻畫質(zhì)/清晰度切換) 的操作代碼
- React+TS+IntersectionObserver實(shí)現(xiàn)視頻懶加載和自動(dòng)播放功能
- react-native 封裝視頻播放器react-native-video的使用
- React自定義視頻全屏按鈕實(shí)現(xiàn)全屏功能
- React中使用react-player 播放視頻或直播的方法
- react-native-video實(shí)現(xiàn)視頻全屏播放的方法
- react中實(shí)現(xiàn)將一個(gè)視頻流為m3u8格式的轉(zhuǎn)換
相關(guān)文章
如何對(duì)react hooks進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了如何對(duì)react hooks進(jìn)行單元測(cè)試的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07React報(bào)錯(cuò)之Parameter event implicitly has a
這篇文章主要為大家介紹了React報(bào)錯(cuò)之Parameter event implicitly has an any type,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08React?Hooks?實(shí)現(xiàn)的中文輸入組件
這篇文章主要為大家介紹了React?Hooks實(shí)現(xiàn)的中文輸入組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05React實(shí)現(xiàn)評(píng)論的添加和刪除
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)評(píng)論的添加和刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07create-react-app中添加less支持的實(shí)現(xiàn)
這篇文章主要介紹了react.js create-react-app中添加less支持的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11react-native-fs實(shí)現(xiàn)文件下載、文本存儲(chǔ)的示例代碼
本篇文章主要介紹了react-native-fs實(shí)現(xiàn)文件下載、文本存儲(chǔ)的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解下2017-09-09