react-player如何实现视频播放与自定义进度条效果

这篇文章将为大家详细讲解有关React-player如何实现视频播放与自定义进度条效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

环境

react.js   ant design pro 4.0

实现效果

代码

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// 数据回流编辑页export default class OperationEdit extends React.Component{    state={        slideValue:0, // 进度条当前取值        playing:false,  // 视频true播放 false暂停        playbackRate:1,   // 视频播放倍速        timeConsuming:0,   // 本页耗时        duration:0,        // 视频总时长        controllerTimeConsuming:true,  // 本页计时开关 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})   // 设置进度条当前值        this.player.seekTo(parseFloat(value))  // 改变视频进度    };    // 设置视频播放倍速    handleVideoSpeedChange = value =>{        this.setState({playbackRate:value})    // 视频总时长    handleDuration = (duration) => {        this.setState({ duration })    // 清除计时器 或继续启用计时器    changeInterval = controllerTimeConsuming =>{        if(controllerTimeConsuming){  // 开始计时            interval = setInterval(this.addTimeConsuming, 1000)        }else{  // 暂停计时            clearInterval(interval);         this.setState({controllerTimeConsuming})    // 当前播放进度    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}}>                    {}                    <Row gutter={24}>                        {}                        <Col span={10}>                            <Row gutter={24}>                                {}                                                                       <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)} // 当媒体使用seconds参数搜索时调用                                         progressInterval={100}                 // onProgress 回调的速度  太大会导致进度条走动不平滑                                         onProgress={this.handleProgress}                                         onError={e => message.error(e)}  // 视频播放错误                                         // controls // 设置为true或false显示本机播放器控件                                     />                                {}                            </Row>                            <Row gutter={24} style={{marginTop:'10px',textAlign:"center"}}>                                <Col span={8}>                                    <Button onClick={()=>this.setState({playing:!playing})}>{playing?"暂停":"播放"}</Button>                                </Col>                                    <Button>跳过重复</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>                        {}                        <Col span={12}>                            {}                                                        <Form {...formItemLayout} >                                <Row gutter={24}>                                    <Col span={24}>                                         <Form.Item  name="zhenPhoto" label="静态图">                                            <Input  style={{height:80}} placeholder="请输入静态图" />                                        </Form.Item>                                    </Col>                                </Row>                                        <Form.Item  name="distinguishResult" label="识别结果">                                            <Input style={{height:80}} placeholder="请输入识别结果" />                                        <Form.Item  name="markResult" label="标注结果">                                            <Input style={{height:80}} placeholder="标注结果" />                            </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)}                                />                    {}                    <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>                    {}                    <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>        )}

关于react-player如何实现视频播放与自定义进度条效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。