本文介绍了如何使用JavaScript为video元素添加自定义进度条。通过获取视频总长度和当前进度，计算出进度条的比例并实时更新。同时，实现了拖动进度条使视频跳转到相应位置的功能。此外，还提及了一个附加效果：当用户操作时控制条显示，一段时间无操作则自动隐藏。
思路：
1.进度条，首先要知道视频的总长度，和视频的当前进度，与其对应的便是进度条的总长度和当前的长度，两者比值相等
2.获取视频的总长度（单位是秒），获取当前进度
3.要实现的功能，首先是进度条根据视频播放的进度，不断的增加。意思就是不断的获取视频的当前进度，然后去除以视频的总长度，拿这个比值乘以进度条的总长度，就得到经度条当前的长度，赋值。
4.拖动经度条，视频在相应的位置播放。反过来，先获取进度条的当前位置，除以进度条的总长度，拿这个比值乘以视频的总长度，就得到视频当前应该播放的进度，赋值。
上面稍后有时间，把代码整理出来贴给大家。另外再添加一个效果，当用户有操作时，控制条就显示，几秒之内没有操作，控制条则消失。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>video test</title> 6 </head> 7 <body> 8 <style> 9 body
最低0.47元/天 解锁文章
扫一扫
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
