当前位置:   article > 正文

给video添加自定义进度条

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         bo
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/130248
推荐阅读
相关标签
  

闽ICP备14008679号