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(
             
                
                    {/* 视频、右侧标注、版本号 */}
                    
                        {/* 视频 */}
                        
                            
                                {/* 
  */}
                                   
                                     console.log('onSeek', e)} // 当媒体使用seconds参数搜索时调用
                                         progressInterval={100}                 // onProgress 回调的速度  太大会导致进度条走动不平滑
                                         onProgress={this.handleProgress}
                                         onError={e => message.error(e)}  // 视频播放错误
                                         // controls // 设置为true或false显示本机播放器控件
                                     />
                                {/* 
 */}
                            
                            
                                
                                    this.setState({playing:!playing})}>{playing?"暂停":"播放"}
                                
                                
                                    跳过重复
                                
                                
                                    
                                        0.5x
                                        0.75x
                                        倍速
                                        1.25x
                                        1.5x
                                        2x
                                    
                                   
                                
                              
                        
                        {/* 静态图 */}
                        
                            {/* 
                                静态图
                                
                                    
 
                                        帧图片
                                    
                                
                             */}
                            
                            

                                
                                     
                                        
                                            
                                        
                                    
                                
                                
                                     
                                        
                                            
                                        
                                    
                                
                                
                                     
                                        
                                            
                                        
                                    
                                

                            
 
                        
                        {/* 版本号 */}
                        
                            V1.0.01
                            V1.0.00
                        
                    
                    {/* 进度条与帧图 */}
                    
                        
                            {/* 进度条 */}
                            

                            this.formatTimeConsuming(val)}
                                />
                        
                    
                    {/* 状态切换按钮 */}
                    
                        
                            
                                
                                    上一条
                                    废弃
                                
                                
                                    完成
                                    下一条
                                
                            
                        
                    
                    {/* 任务计时 */}
                    
                        
                            
 本页耗时：{this.formatTimeConsuming()} 
  
                            

                                {controllerTimeConsuming?
                                    this.changeInterval(false)} style={{color:"#1296DB",fontSize:30}}/>
                                    :this.changeInterval(true)} style={{color:"#1296DB",fontSize:30}} />}
                            
 
                        
                        32 / 100
                        总耗时：08:25
                    
                
            
        )
    }
}