当你点击进度条和它的活动元素时,空格键突然停止工作(播放或暂停播放).

我不能让它工作,即使使用addEventListener和Keydown.

下面是测试它的代码.当你点击进度条并点击任意键时,它应该会在控制台中登录目标.它在 firefox 上运行得很好,但在Chrome上就不行.就像进度条不是文档的一部分一样.

document.addEventListener('keydown', controlVideo);  
function controlVideo(e) {    
  console.log(e.target);  
}
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls></video>

Chrome版本118.0.5993.89

推荐答案

对于任何寻求快速变通解决方案的人,您可以使用Plyr库. 它的重量很轻,空格键在最新的Chrome和Edge上再次发挥作用.

const player = new Plyr('#video');
<link href="https://cdn.plyr.io/3.7.8/plyr.css" rel="stylesheet"/>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls></video>

Javascript相关问答推荐

我可以后增量超过1(最好是内联)吗?

JavaScript .Click()函数不起作用

在卡信息之间切换

创建1:1比例元素,以另一个元素为中心

Vega中的模运算符

调用removeEvents不起作用

cypress中e2e测试上的Click()事件在Switch Element Plus组件上使用时不起作用

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

我怎么才能得到Kotlin的密文?

S文本内容和值不必要的不同

将核心模块导入另一个组件模块时存在多个主题

在Matter.js中添加从点A到另一个约束的约束

将数组扩展到对象中

邮箱密码重置链接不适用于已部署的React应用程序

使用父标签中的Find函数查找元素

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

处理app.param()中的多个参数

Reaction即使在重新呈现后也会在方法内部保留局部值

从异步操作返回对象

如何在加载页面时使锚定标记成为焦点