防止HTML5视频中键盘的后退键和前进键 [英] Prevent backward and forward keys from keyboard in HTML5 Video

问题描述

我面临着禁用HTML视频播放器的后退和前进键操作的问题.当前，默认行为是我们可以从按键前进和后退

I am facing a problem to disable the backward and forward keys action for HTML video player. Currently, the default behavior is we can move forward and backward from keys

这是代码段

<style>
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
  display: none;
}  
video::-webkit-media-controls-current-time-display  {
    display: none;
}  
video::-webkit-media-controls-time-remaining-display{
    display: none;
}  
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <video id="home_explainer_placeholder" class="video_placeholder" controls controlsList="nodownload">
  <source src="http://re10tive.com/wp-content/uploads/2020/07/Arsenal-football-player-Aubameyang-driving-his-£3-Million-LaFerrari-in-Central-London.mp4" type="video/mp4">
  </video>
<script>

有什么方法可以实现这种解决方案或任何高度赞赏的解决方案

Is there any way to achieve this or any kind of solution highly appreciated

推荐答案

添加用于查找和timeupdate的侦听器应有助于您一起禁用所有查找，例如，我最初在此处使用的示例是:

Adding listeners for seeking and timeupdate should help you disable the seeking all together, example that I used was originally found here: How to disable seeking with HTML5 video tag ?

不幸的是，在视频中没有烦人的滞后的情况下，我还没有找到能做到这一点的解决方案.除非您当然有一些自定义播放器，以允许您禁用跳过.

Unfortunately, I haven't found any solution that would do it without that annoying lag in the video. Unless of course you have some custom player that would allow you to disable skipping.

var video = document.getElementById('home_explainer_placeholder');
var supposedCurrentTime = 0;
video.addEventListener('timeupdate', function() {
  if (!video.seeking) {
    supposedCurrentTime = video.currentTime;
  }
});
// prevent user from seeking
video.addEventListener('seeking', function() {
  // guard agains infinite recursion:
  // user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
  var delta = video.currentTime - supposedCurrentTime;
  if (Math.abs(delta) > 0.01) {
    console.log("Seeking is disabled");
    video.currentTime = supposedCurrentTime;
  }
});
// delete the following event handler if rewind is not required
video.addEventListener('ended', function() {
  // reset state in order to allow for rewind
  supposedCurrentTime = 0;
});

audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
  display: none;
}

video::-webkit-media-controls-current-time-display {
  display: none;
}

video::-webkit-media-controls-time-remaining-display {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="home_explainer_placeholder" class="video_placeholder" controls controlsList="nodownload">
  <source src="http://re10tive.com/wp-content/uploads/2020/07/Arsenal-football-player-Aubameyang-driving-his-£3-Million-LaFerrari-in-Central-London.mp4" type="video/mp4">
  </video>

这篇关于防止HTML5视频中键盘的后退键和前进键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！