本机视频播放器：从按键中删除事件处理程序

Question

我正在构建一个基于网络的视频播放平台，需要完全控制视频标签的重播行为。具体来说，我想实现自己的擦洗功能。为此，我想禁用本机行为，通过按 "arrow left"、"arrow right" 和 "space" 来跳过焦点视频标签的重播，并制作我自己的键盘控件。

我已经实现了全局按键功能，可以从任何地方控制视频播放器：

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

为了停止聚焦的视频播放器自行对按键做出反应，我尝试像这样覆盖处理程序：

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]); 删除事件侦听器，我需要知道执行的本机函数的名称，我认为因浏览器而异。

有办法吗？谢谢大家！

编辑：我在我的视频标签中使用属性 "controls"。如果我删除它，它可以工作，但也会丢失我需要的 GUI 控件。此外，发生在我可以测试的所有浏览器中（Chrome、FF、Safari）。

Answer 1

您必须咬紧牙关，放弃控件属性并制作您自己的自定义控件。该部分实际上并没有那么多代码，但如果您想要一个漂亮的 GUI 来替换它，可能需要一点谷歌搜索或 MS 绘画。

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。他们自己制作了按钮、洗涤器、"like," "share," 和所有这些。

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

如果你想phone它，那里有开源的：

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

本机视频播放器：从按键中删除事件处理程序

Native video player: Remove event handlers from key presses

javascript

arrow-keys

html5-video