如何覆盖默认浏览器 HTML5 视频控件？

Question

我正在尝试将视频播放器的自定义快捷方式更改为 Youtube 的自定义快捷方式。在 Youtube 上，箭头键快退和快进各 5 秒。默认情况下，在 Firefox 和 Google 上，按下左箭头键时视频快退 15 秒，按下右箭头键时视频快进 15 秒。我想让它成为 5 秒。我试过使用 e.preventDefault() 无济于事。 space 栏也有同样的问题。

关于如何实现这一点有什么想法吗？

当前代码：

window.addEventListener('keydown', function (event) {
if (event.key === "ArrowLeft") {
        event.preventDefault();
        video.currentTime -= 5;
} else if (event.key === "ArrowRight") {
        event.preventDefault();
        video.currentTime += 5;
        }
});

谢谢

Answer 1

首先，您应该检查 HTML 文档中是否禁用了视频元素上的控件。

<video *controls* width="250">  Remove *controls*

如果它被禁用，但仍然不适合你，你可以尝试使用 JQuery 来解决问题，方法是：

<video id="video" type="video/mp4" src="./video.mp4" autoplay></video>

var vid = document.getElementById("video");

$(window).keydown(function(e) {
  if (e.which == 32) {
    e.preventDefault();
    if (video.paused) {
      playVideo();
    }else {
      pauseVideo();
    }
  }else if(e.which == 39){
    skipForward();
  }else if(e.which == 37){
    skipBackward();
  }
});

function skipForward() {
  vid.currentTime += 10.0;

  $("#skip_forward_visual").removeClass("v_hidden");  // Visual Indicator

  setTimeout(function() {
    $("#skip_forward_visual").addClass("v_hidden");
  }, 400);
}

function skipBackward(){
  vid.currentTime -= 10.0;

  $("#skip_backward_visual").removeClass("v_hidden"); // Visual Indicator

  setTimeout(function() {
    $("#skip_backward_visual").addClass("v_hidden");
  }, 400);
}

Answer 2

希望这个 helps.It 将覆盖左右键并搜索给定号码的视频。

<script>
var video = document.querySelector('video'); //video element
window.addEventListener('keydown', function (event) {
if (event.keyCode  === 37) { 
        //Left
        video.currentTime -= 10;
} else if (event.keyCode === 39) { 
        //Right
        video.currentTime += 10;
        }
});
</script>

Answer 3

根据 OP 代码中提供的内容，它看起来应该可以工作。它不会的唯一方法是 video 为空。 event.key 应该是 event.code。当然，event.preventDefault() 没有帮助也没有阻碍......或者如果箭头键的默认行为以某种方式受到干扰，它实际上有帮助......虽然无法真正了解你的情况。

演示

window.onkeydown = vidCtrl;

function vidCtrl(e) {
  const vid = document.querySelector('video');
  const key = e.code;

  if (key === 'ArrowLeft') {
    vid.currentTime -= 5;
    if (vid.currentTime < 0) {
      vid.pause();
      vid.currentTime = 0;
    }
  } else if (key === 'ArrowRight') {
    vid.currentTime += 5;
    if (vid.currentTime > vid.duration) {
      vid.pause();
      vid.currentTime = 0;
    }
  } else if (key === 'Space') {
    if (vid.paused || vid.ended) {
      vid.play();
    } else {
      vid.pause();
    }
  }
}

video {
  display: block;
  width: 320px;
  margin: 15px auto;
}

<video src='https://glsec.s3.amazonaws.com/mp4/60s.mp4'></video>

Answer 4

我认为 zer00ne 解决方案不起作用，因为它没有覆盖 youtube 的默认 forward/backward 5 秒时间（至少对我来说，无论是 Firefox 还是 Chrome）。事实上，我认为他的解决方案只是在默认的5秒基础上增加5秒。

我试图找到更好的解决方案，但即使使用此代码

window.onkeydown = vidCtrl;

function vidCtrl(e) {
  e.preventDefault();
  const vid = document.querySelector('video');
  const timeCurrent = vid.currentTime
  console.log(timeCurrent);
}

返回的当前时间是 forward/backward 5 秒的默认行为发生后的时间。不是很懂。

编辑：看起来这里的问题是一样的：JavaScript - Prevent default in html5 video tag while fullscreen

如何覆盖默认浏览器 HTML5 视频控件？

How can you override default browser HTML5 video controls?

html

javascript

video

keyboard-shortcuts

html5-video

演示