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

Question

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

Answer 1

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

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; 
});