javascript - native 视频播放器 : Remove event handlers from key presses

Question

我正在构建一个基于网络的视频播放平台，需要完全控制视频标签的重播行为。具体来说，我想实现我自己的擦洗功能。为此，我想禁用 native 行为，通过按“左箭头”、“右箭头”和“空格”来跳过焦点视频标签的重播，并创建自己的键盘控制。

我实现了全局按键功能，以便能够从任何地方控制视频播放器:

window.addEventListener('keyup', this.keyboardControl);

为了停止焦点视频播放器自行对按键使用react，我尝试重写处理程序，如下所示:

let video = document.getElementById('video');
video.addEventListener("keydown", function(event){
  event.preventDefault();
});
video.addEventListener("keypress", function(event){
  event.preventDefault();
});
video.addEventListener("keyup", function(event){
  event.preventDefault();
});

使用 target.removeEventListener(type, listener[, options]); 删除事件监听器，我需要知道所执行的 native 函数的名称，我认为该名称因浏览器而异。

有办法吗？谢谢各位!

编辑:我在视频标签中使用属性“控件”。如果我删除它，它可以工作，但也会失去我需要的 GUI 控件。此外，在我可以测试的所有浏览器中都会发生这种情况(Chrome、FF、Safari)。

Answer 1

您必须咬紧牙关，放弃控件属性并创建自己的自定义控件。这部分实际上并不是那么多代码，但如果您想要一个漂亮的 GUI 来替换它，可能需要一些谷歌搜索或 MS Painting。

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

您正在尝试做一些类似于 Youtube 和 Vimeo 所做的事情，所以请查看他们的视频播放器以获取灵感。尽量不要忽视它们有多复杂，只要基本上理解它们都是 JS、HTML 和 CSS 即可。他们自己制作了按钮、 slider 、“点赞”、“分享”等等。

好处是您的播放器在所有浏览器中看起来都一样。

如果您想调用它，那里有开源的:

https://blog.bitsrc.io/5-open-source-html5-video-players-for-2018-38fa85932afb