如何监听Video标签点击进度条的事件？
- 回答 (1)
- 关注 (0)
- 查看 (1167)
我这里现在有两个时长一样的视频，想让他们同步播放，希望点击其中一个的进度条也能改变另一个的进度，但是video并没有点击进度条事件，该怎么做？
HTML标准中有一条事件叫做：timeupdate，该事件监听操作浏览器进度条动作，返回修改前后的视频位置，具体介绍如下图所示：
timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
该事件可以在以下情况被调用:
播放音频/视频（audio/video）
移动音频/视频（audio/video）播放位置（即播放时刻点被改变，例如拖动了播放进度条）
提示：?timeupdate 事件通常与 Audio/Video 对象的?currentTime?属性一起使用，该属性返回音频/视频（audio/video）的播放位置（以秒计）。
在菜鸟教程中尝试一下：https://www.runoob.com/try/try.php?filename=tryhtml5_av_event_timeupdate_el
以下是Video标签的事件列表：
eventTester("loadstart");? //客户端开始请求数据
eventTester("progress");? ? //客户端正在请求数据
eventTester("suspend");? ?? //延迟下载
eventTester("abort");? ? ?? //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart");?? //客户端开始请求数据
eventTester("progress");? ? //客户端正在请求数据
eventTester("suspend");? ?? //延迟下载
eventTester("abort");? ? ?? //客户端主动终止下载（不是因为错误引起），
eventTester("error");? ? ?? //请求数据时遇到错误
eventTester("stalled");? ?? //网速失速
eventTester("play");? ? ? ? //play()和autoplay开始播放时触发
eventTester("pause");? ? ?? //pause()触发
eventTester("loadedmetadata");? //成功获取资源长度
eventTester("loadeddata");? //
eventTester("waiting");? ?? //等待数据，并非错误
eventTester("playing");? ?? //开始回放
eventTester("canplay");? ?? //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking");? ?? //寻找中
eventTester("seeked");? ? ? //寻找完毕
eventTester("timeupdate");? //播放时间改变
eventTester("ended");? ? ?? //播放结束
eventTester("ratechange");? //播放速率改变
eventTester("durationchange");? //资源长度改变
eventTester("volumechange");? ? //音量改变
作者：安妮花
链接：https://www.jianshu.com/p/efc29d72d7ec
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。所属标签
javascript相似问题
关注
便宜云服务器开发者公众号
将获得
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
便宜云服务器开发者
扫码关注便宜云服务器开发者
领取便宜云服务器代金券