ビデオのコントロールを表示するが、ユーザーがビデオを制御できないようにする

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