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.

回答1:

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.

回答2:

Extending the answer from @svetlin-mladenov, you can do the following to prevent the user from seeking any part of the video which has not been watched yet. This will also allow the user to rewind and the seek out any part of the video which had already watched previously.

var timeTracking = {
                    watchedTime: 0,
                    currentTime: 0
                };
                var lastUpdated = 'currentTime';

                video.addEventListener('timeupdate', function () {
                    if (!video.seeking) {
                        if (video.currentTime > timeTracking.watchedTime) {
                            timeTracking.watchedTime = video.currentTime;
                            lastUpdated = 'watchedTime';
                        }
                        //tracking time updated  after user rewinds
                        else {
                            timeTracking.currentTime = video.currentTime;
                            lastUpdated = 'currentTime';
                        }
                    }


                });
                // prevent user from seeking
                video.addEventListener('seeking', function () {
                    // guard against infinite recursion:
                    // user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
                    var delta = video.currentTime - timeTracking.watchedTime;
                    if (delta > 0) {
                        video.pause();
                        //play back from where the user started seeking after rewind or without rewind
                        video.currentTime = timeTracking[lastUpdated];
                        video.play();
                    }
                });

回答3:

You could use an HTML5 video player like video.js and use CSS to hide the seek bar.

Or you could build your own controls for HTML5 video.

Also, the event you're looking for is 'seeking'. As in (with new jquery event binding):

$(myVideoElement).on('seeking', function(){
  // do something to stop seeking
})

回答4:

<!DOCTYPE html> 
<html> 
<body> 

<video controls onseeking="myFunction(this.currentTime)">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

<script>
var currentpos = 0;

function myFunction(time) {
    if(time > currentpos) {
      video.currentTime = currentpos;
    }
}

var video = document.getElementsByTagName('video')[0];

function getpos(){
  currentpos = video.currentTime;
}
onesecond = setInterval('getpos()', 1000);
</script>

</body> 
</html>

Did the trick for me :)

回答5:

var supposedCurrentTime = 0;

$("video").on("timeupdate", function() {

    if (!this.seeking) {
        supposedCurrentTime = this.currentTime;
    }
});
// prevent user from seeking
$("video").on('seeking', function() {
    // guard agains infinite recursion:
    // user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
    var delta = this.currentTime - supposedCurrentTime;

    if (Math.abs(delta) > 0.01) {
        //console.log("Seeking is disabled");
        this.currentTime = supposedCurrentTime;
    }

});

$("video").on("ended", function() {
    // reset state in order to allow for rewind
    supposedCurrentTime = 0;
});

回答6:

With video js as my video player instead of the vanilla HTML5 version:

.vjs-default-skin .vjs-progress-holder {
  height: 100%;
  pointer-events: none;
}

来源：https://stackoverflow.com/questions/11903545/how-to-disable-seeking-with-html5-video-tag

标签

html5

video

html5-video