弹幕视频设计网站16------------弹幕暂停与调节进度条

简介: 弹幕视频设计网站16------------弹幕暂停与调节进度条


1、之后,我们添加这两个功能,弹幕暂停与调节进度条:

1.1 第一个是点击暂停,他就能够暂停

1.2 这个时候我们要把弹幕启动起来,跟之前是一样的

1.3 定义两个组件

2、写上两个方法,想想怎么能够让弹幕停止绘制

3、每次调用的时候,都会让递归减2

4、如果是true的话,我们就不让他绘画,改为flase就不自动绘画了

5、我们先获得barrage这个对象,可以看到对象的

6、点击暂停,就实现暂停了,点击绘画,就实现绘画了

7、点击暂停,就暂停了,但是却出现了一个问题, 点击开始就不动了,这是为什么呢?

8、这个弹幕,我们需要调用一下drawBarrage这个方法

9、我们只需要调用一下方法就行

10、现在已经成功了

11、现在解决新的问题,拖拽一下进度条之后,弹幕就再也不出现了,这里怎么解决,我们的预想是我们弹幕往前滑动的时候,当我们的弹幕往后滑动是无所谓的,因为往后滑动是无所谓的,一定是没有出现过的,因此我们要判定自己字符条的行为到底是往前还是往后。

12、只要调动的时间小于刚才滑动的时间就行了,我们就调动刚才滑动的函数

13、先定义一个lastTime的函数

14、 将我们保存在last-time这个时间,保存到我们的属性当中

15、全部都改成0就可以

16、往前滑动也仍然出现

17、添加弹幕清除功能

18、现在已经成功了

19、将弹幕改为未使用的状态

20、此刻弹幕进度条修改好了

目录
打赏
0
0
0
0
42
分享
相关文章
FreeSwitch命令:切换视频会议画面布局
FreeSwitch命令:切换视频会议画面布局
795 0
在阿里云直播解决方案中,当使用ARTC协议观看直播并进行清晰度切换时出现画面卡顿或马赛克现象,可能存在以下几种原因
【6月更文挑战第30天】阿里云直播中,ARTC协议下清晰度切换出现卡顿或马赛克可能由网络带宽、缓冲策略、转码效率、播放器解码、协议特点及服务器资源调度引起。解决措施包括优化网络、智能切换算法、播放器与服务器优化。通过监控和日志分析定位问题,参照官方最佳实践进行优化。
376 1
浅浅地优化下视频流播放体验
浅浅地优化下视频流播放体验
762 0
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
323 0
像素流技术在微信和小程序中如何全屏?
针对像素流技术中可能存在的问题,做了深入研究,并将其产品化。针对手机微信或者小程序中不能全屏的问题,点量云渲染分析原因可能是模型的手机屏幕和原始分辨率不一样,所以会有黑边不能全屏,通过一些我们研究的适配方法是可以做到全屏。比如启动模型的时候,能够获取到观看者的手机屏幕分辨率,在传回到模型中,这样模型用相应的分辨率运行,就不会有黑边,实现全屏的效果。
330 0
像素流技术在微信和小程序中如何全屏?
下一篇
oss创建bucket
目录
目录
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等