ontimeupdate
ontimeupdate 事件在视频 / 音频 (audio / video)当前的播放位置发送改变时播放
简单来讲:就是视频在播放时,将不断触发。
<script>
video.ontimeupdate = _.throttle(() => {
// console.log(video.currentTime)
// 把当前的时间存储到本地存储
localStorage.setItem('currentTime', video.currentTime)
}, 1000)
</script>
此处用到了节流函数,每秒只会触发一次。
video.currentTime可以获取到,当前播放时长
onloadeddata
onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的
下一帧时触发
简单来讲:刷新以及打开页面将会触发
<script>
video.onloadeddata = () => {
// 将存起来的时间取出,设置给播放时长,
// 打开即可跳转到上次播放位置
video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>
video.currentTime 可读写,直接读就是获取播放时长,赋值即可设置当前播放时长。
文章介绍了如何使用JavaScript的ontimeupdate事件来监听视频播放位置的变化,并通过节流函数控制每秒更新一次。同时,onloadeddata事件用于在视频数据加载完成后设置上次保存的播放时间,实现播放位置记忆功能。video.currentTime属性在读写中起到了关键作用,用于获取和设置视频的当前播放时长。
1万+

被折叠的 条评论
为什么被折叠?



