如何实现HTML5视频鼠标hover时每次都从起始位置开始播放

核心原理 #

• 视频DOM元素内置currentTime属性，用于设置/读取当前播放进度，单位为秒，赋值为0即可将进度重置到视频开头
• 仅需在触发播放前新增一行重置进度的代码即可满足需求

修改后的完整代码 #

const clip = document.querySelectorAll('.clip');
for (let i = 0; i < clip.length; i++) {
    clip[i].addEventListener('mouseenter',
        function(e){
            // 重置视频进度到开头
            clip[i].currentTime = 0;
            clip[i].play()
        })
    clip[i].addEventListener('mouseout',
        function(e){
            clip[i].pause()
        })
}

可选优化建议 #

• 若要避免重置进度时出现加载卡顿，可给对应<video>标签添加preload="auto"属性，提前加载视频元数据和开头片段

内容的提问来源于stack exchange，提问作者Ved Sarkar