Prevent backward and forward keys from keyboard in HTML5 Video

ぐ巨炮叔叔 提交于 2021-01-29 19:58:06

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!