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}>
{/* <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)} // 当媒体使用seconds参数搜索时调用
progressInterval={100} // onProgress 回调的速度 太大会导致进度条走动不平滑
onProgress={this.handleProgress}
onError={e => message.error(e)} // 视频播放错误
// controls // 设置为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>跳过重复</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}>
{/* <Row gutter={24}>
<Col span={4}>静态图</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="静态图">
<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实现视频播放与自定义进度条效果的文章就介绍到这了,更多相关react-player视频播放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React中使用react-player 播放视频或直播的方法
业务中需要播放视频,寻来寻去,找到了react-player 初次点击,甚是眼熟,思来想去,竟是钉钉同款 如果使用react框架 先安装 npm install --save video-react react react-dom redux 1.引入video-react以及CSS css一定不要忘记引用 否则会出现样式丢失和奇奇怪怪的情况 切记 import "video-react/dist/video-react.css"; import { Player, ControlBa
-
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 } fro
-
Android自定义进度条效果
最近项目中需要在一个功能模块中使用进度条,效果图如下: 上面图片从左到右分别是效果一,效果二,效果三 需求: 以下四点需要实现 1: 当没有没完成进度的时候,显示效果一 2:当进度完成了一部分,显示图二 3:当进度全部完成之后,显示效果三 4:当进度1到进度2需要动画,进度2到进度3需要动画: 同样进度3到进度2或者进度1也需要动画. 刚开始拿到这个东西的时候,考虑了老长时间,觉得还是有技巧的,先说一下思路吧 首先我们,写一个一模一样的底部布局,如下图1: 图一也就是效果一的全部显示, 图三不是
-
js实现自定义进度条效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Staged progress bar</title> <style type="text/css"> *{margin:0;padding:0;} html,body{height:100%;} ul{list-style:none;} .c
-
Android实现带数字的圆形进度条(自定义进度条)
开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g
-
android自定义进度条渐变色View的实例代码
最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码 ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten
-
android自定义进度条渐变圆形
在安全卫生上,经常看到有圆形的进度条在转动,效果非常好看,于是就尝试去实现一下,具体实现过程不多说了,直接上效果图,先炫耀下. 效果图: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度
-
Android 自定义view和属性动画实现充电进度条效果
近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和自定义view的方式来完成这个功能,将它开源出来,供有需要的人了解一下相关的内容. 本次实现的功能类似下面的效果: 接下来便详细解析一下如何完成这个功能,了解其中的原理,这样就能举一反三,实现其他类似的动画效果了. 详细代码请看大屏幕 https://github.com/crazyandcoder
-
Android编程自定义进度条颜色的方法详解
本文实例讲述了Android编程自定义进度条颜色的方法.分享给大家供大家参考,具体如下: 先看效果图: 老是提些各种需求问题,我觉得系统默认的颜色挺好的,但是Pk不过,谁叫我们不是需求人员呢,改吧! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\ 下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到: <style name="Widget.ProgressBar"&
-
Android编程实现自定义进度条颜色的方法
本文实例讲述了Android编程实现自定义进度条颜色的方法.分享给大家供大家参考,具体如下: android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对android自定义进度条的学习过程! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\ 下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到 <style name="Widget.Pro
-
Android自定义进度条的圆角横向进度条实例详解
1.本文将向你介绍自定义进度条的写法,比较简单,但还是有些知识点是需要注意的: invalidate()方法 RectF方法的应用 onMeasure方法的应用 2.原理 画3层圆角矩形,底层为黑色,第二层为灰色,最上一层为进度条颜色,示例图如下: 3.效果图 实现圆角进度条还有很多其他方法,比如在Progress控件里填充圆角图片,通过拉伸图片来达到预想的效果,虽然听起来很简单,但实现起来还是有些麻烦的. 4.解说方法 (1)invalidate()方法 invalidate()是用来刷新