Prevent backward and forward keys from keyboard in HTML5 Video

问题

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

Here is the code snippet

<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

回答1:

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>

来源：https://stackoverflow.com/questions/63040352/prevent-backward-and-forward-keys-from-keyboard-in-html5-video

标签

javascript

html

jquery

css

html5-video