Show controls on video but don't allow the user to control the video

Question

I want to show video controls on a video element in my HTML page but I don't want the user to use the control bar to control the video. I just want the user to see the control bar so that user can just see the progress of the video and cannot skip some of its part.

Answer 1

You can control HTML5 video-playing behavior using JavaScript to trap the seeking event and interrupt the usual behavior. See the example code to control seek bar, so that the user can't seek through the video:

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