弹幕视频设计网站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、此刻弹幕进度条修改好了

相关文章
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
1662 0
|
搜索推荐 Python
将微信聊天做成滚动视频,聊天记录滚动播放
Python实现滚动聊天记录视频制作教程
|
7月前
|
前端开发 JavaScript
弹幕视频设计网站13---------绘制弹幕03
弹幕视频设计网站13---------绘制弹幕03
|
7月前
|
存储 前端开发
弹幕视频设计网站12------绘制弹幕02
弹幕视频设计网站12------绘制弹幕02
|
7月前
|
存储 前端开发 JavaScript
视频弹幕设计网站11-----绘制弹幕
视频弹幕设计网站11-----绘制弹幕
|
7月前
|
JavaScript 数据库
视频弹幕设计网站08-------video样式
视频弹幕设计网站08-------video样式
|
7月前
|
JavaScript 前端开发
技术好文共享:移动端事件(二)——移动端滑屏切换的幻灯片
技术好文共享:移动端事件(二)——移动端滑屏切换的幻灯片
29 0
|
7月前
|
图形学
【unity实战】FPS实现拾取和丢弃枪
【unity实战】FPS实现拾取和丢弃枪
59 0
|
JavaScript
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
172 0
|
存储 缓存 小程序
如何实现游戏中的在线计时器和离线计时器
本文包含了游戏中两种计时器的实现原理和实现方法,皆在帮助你彻底的搞懂游戏开发中的计时器。 如果你没有任何的游戏开发经验,欢迎观看我的“人人都能做游戏”系列视频教程,它会手把手的教你做出自己的第一个小游戏。 在游戏中经常会有需要倒计时的需求,例如倒计时 10 分钟可以获得 1 点体力,倒计时 1 小时后可以开启一个宝箱,或者是根据游戏的计时获得奖励等等。
328 0