Question

我正在构建一个基于Web的视频播放平台，需要完全控制视频标签的重放行为。具体来说，我想实现自己的清理功能。为此，我想禁用本机行为，以通过按“向左箭头”，“向右箭头”和“空格”并设置自己的键盘控件来跳过焦点清晰的视频标签的重放。

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

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]);删除事件侦听器，我需要知道执行的本机函数的名称，并且我认为每个浏览器都不同。

有办法吗？谢谢一束！

编辑：我在视频代码中使用属性“控件”。如果我将其删除，则它可以工作，但也会失去我需要的GUI控件。另外，我可以测试的所有浏览器（Chrome，FF，Safari）中都会发生这种情况。

Answer 1

您必须硬着头皮，放弃controls属性并制作自己的自定义控件。该部分实际上并不需要那么多代码，但是如果您要用漂亮的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。他们自己制作了按钮，洗涤器，“喜欢”，“共享”以及所有这些内容。

奖励是您的播放器在所有浏览器中的外观都一样。

如果要拨打电话，那里有开源的电话：

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

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

1 个答案: