在视频上显示控件，但不允许用户控制视频

Question

我想在 HTML 页面中的视频元素上显示视频控件，但我不希望用户使用控制栏来控制视频。我只是希望用户看到控制栏，以便用户只能看到视频的进度而不能跳过其中的某些部分。

Answer 1

您可以使用 JavaScript 来控制 HTML5 视频播放行为，以捕获搜索事件并中断通常的行为。 请参阅示例代码来控制搜索栏，使用户无法通过视频进行搜索：

var video = document.getElementById('video');
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;
});