时间戳

首页 > 解决方案 > 按空格键不会切换视频播放或暂停

javascript - 按空格键不会切换视频播放或暂停

问题描述

我正在尝试为video. 除了按空格键外，一切正常。这是我的代码：

let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
  if (e.which == 32 || e.which == 80) {
    e.preventDefault();
    e.stopPropagation();
    video.paused ? video.play() : video.pause();
    return false;
  }
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>

在这里，我使用spacebarandP来切换播放和暂停。使用spacebar时以某种方式切换了两次，而不使用P。

我尝试添加事件侦听器keyup并keypress拒绝spacebar输入。但它也不起作用。

有什么关于我缺少的 HTML5 视频的吗？

标签： javascripthtmlhtml5-video

解决方案

由于默认情况下空格键会播放和暂停视频，因此您必须反转三元运算符中的函数。p处理标签时无需更改它们。

所以唯一的办法就是在2个不同的地方处理两个不同的key code ifs。

请参阅下面的工作代码片段。

let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
  if (e.which == 32) {
    e.preventDefault();
    e.stopImmediatePropagation();
    video.paused ? video.pause() : video.play();
    return false;
  }
  else if (e.which == 80) {
    e.preventDefault();
    e.stopImmediatePropagation();
    video.paused ? video.play() : video.pause();
    return false;
  }
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>

如果你不能拆分它，那么嵌套 if-else 呢？

let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
  if (e.which == 32 || e.which == 80) {
    if (e.which == 80) {
      e.preventDefault();
      e.stopImmediatePropagation();
      video.paused ? video.play() : video.pause();
      return false;
    } else {
      e.preventDefault();
      e.stopImmediatePropagation();
      video.paused ? video.pause() : video.play();
      return false;
    }
  }
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>

推荐阅读