如何改变video标签自带的箭头快进快退功能

问题描述

有这么个需求，用户想在看视频的时候，按下键盘的左右箭头， 固定快进/快退的时间。

项目中使用的video标签播放视频，标签添加自带的control属性，会有进度条等控件，有按箭头快进/快退功能。

但是它这个快进快退似乎是按照视频长度的百分比来得，如果是长视频，你按一下就会间隔5分钟。

<video src="#src" ref="videoRef" controls></video>

方案一

搞个可以控制快进的player库或者 不添加自带的controls，自己写一个控件。

太麻烦了，pass

方案二

保留controls，想办法改变它默认的快进的值。或者取消他的事件响应。

查了下MDN上面，video标签controls属性，没有任何关于快进快退的键盘事件的描述。 甚至找不到它绑定在那个元素上面的。 呃，放弃。

方案三

领导尝试给出了一个方案。与方案二类似，就是监听键盘keydown事件，让其在捕获阶段就执行快进。停止冒泡，这样就变相取消了它默认的快进功能。

function add(e) {
  const code = e.keyCode;
  if (code === 37 || code === 39) {
    e.preventDefault();
    e.stopImmediatePropagation(); // 停止事件传递
    if (videoRef.value) {
      videoRef.value.currentTime = videoRef.value.currentTime + 60 * 1 * (code-38)
    }
    return;
  }
}
// window上监听，{capture: true}，捕获阶段执行
window.addEventListener("keydown", add, {
        capture: true
      })

现在确实成功的阻断了video自带的快进功能，但是如果页面是如果有其他的输入框，按下键盘的箭头也会失效。

所以还需要考虑优化一下。只需要在add函数最开始判断下，当前激活的元素是否为video

// 不是video激活就什么也不干
if (document.activeElement !== videoRef.value) {
    return
  }

还有别忘了取消事件监听

window.removeEventListener("keydown", add, {
    capture: true
  })

最后

问题解决了，其实知识点都还是那些基础的知识，一个是事件绑定参数captrue：true，一个是document.activeElement但是熟练运用还是需要点实力的。 还是领导强啊。