Search code examples
htmlvideohtml5-video

How to disable seeking with HTML5 video tag ?


I know this is not advisable. But still need this feature to be implemented. Tried everything from onseeking,onseeked to media controller. Nothing worked. Are there any external libraries to disable seeking. would be helpful if some pointers on how to go about using custom controls.


Solution

  • The question is quite old but still relevant so here is my solution:

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

    JsFiddle

    It is player agnostic, works even when the default controls are shown and cannot be circumvented even by typing code in the console.