思路:
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