How to disable seeking with HTML5 video tag ?

Question

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.

The seek bar should still be visible but with seeking disabled. — ajan, Aug 10 '12 at 14:16

score 36 · Accepted Answer · edited Jun 15 '21 at 22:10

36

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.

edited Jun 15 '21 at 22:10

czerny

15,090
14
68
96

answered Dec 20 '15 at 18:26

Svetlin Mladenov

4,307
24
31

1

any reason I should care to use '0.01' in the comparison 'Math.abs(delta)' instead of just 0? – Rafael Moni Jun 01 '16 at 14:50
1

@RafaelMoni Usually it's a good idea to compare floating point number to a certain delta and not for absolute equality because of the way they are implemented in hardware. In this case there is additional incentive to do so because currentTime is not a continuous value. It takes only values equal to the start times of the video frames. This could lead to cases where currentTime jumps back/forward unexpectedly depending on the video stream, decoder and browser. 0.01 was chosen at random as a sufficiently small number. – Svetlin Mladenov Jun 03 '16 at 18:58
@SvetlinMladenov The seeking happens in Microsoft Edge 40.15063.674.0 | Microsoft EdgeHTML 15.15063, if we try continuously. Any fix for it? – Prateek Agarwal Apr 05 '18 at 15:51
@PrateekAgarwal what do you mean "if we try continuously"? – Svetlin Mladenov Apr 11 '18 at 15:57
I’ve attempted 2 times and it did seek. The video.currentTime is getting set to seeked time not sure how? – Prateek Agarwal Apr 11 '18 at 16:29

score 3 · Answer 2 · edited Jun 13 '23 at 18:18

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

score 0 · Answer 3 · edited Jun 13 '23 at 18:20

0

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

edited Jun 13 '23 at 18:20

Josef

2,869
2
22
23

answered Aug 10 '12 at 17:11

heff

3,171
1
20
21

1

Are you sure i can disable seeking with the seek bar still there? – ajan Aug 28 '12 at 15:18
1

Are you sure i can disable seeking with the seek bar still there using video.js? Can videos.js be used to display videos with sencha touch for mobile devices???? FYI the custom controls are not visible in the link you mentioned but the code contains almost everything i need. – ajan Aug 28 '12 at 15:29

score 0 · Answer 4 · answered Mar 16 '15 at 15:23

<!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 :)

Welcome to SO! Please, consider adding some text as explanation, rather than code only answers. It's often easier to understand. — Stephane Rolland, Mar 16 '15 at 15:27

score 0 · Answer 5 · edited Jun 13 '23 at 18:18

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

score 0 · Answer 6 · answered Sep 28 '21 at 13:30

0

Maybe it can help someone, I use this way to remove all the progress control callbacks.

player.controlBar.progressControl.off();
player.controlBar.progressControl.seekBar.off();

answered Sep 28 '21 at 13:30

Lafif Astahdziq

3,788
29
38

score 0 · Answer 7 · edited Jun 13 '23 at 18:19

0

Assuming this is for a standard HTML5 video player and with no 3rd party JS library interfering:

This should stop them dead in their tracks, albeit over a decade late for your needs but still useful to others...

V.onseeking = function () {
    event.preventDefault();
    alert('Please don\'t skip the tute!');
};

NB: "V" being the ID of your player.

edited Jun 13 '23 at 18:19

Josef

2,869
2
22
23

answered Feb 18 '23 at 01:03

temp_poster

1

Hey @temp_poster and thank you for your contribution to StackOverflow. As this question is over 10 years old and was already answered over 8 years ago, you might want to try answering unanswered and newer questions. Thus I will flag your answer for deletion. – bastianwegge Feb 22 '23 at 15:44

score -1 · Answer 8 · answered Jul 22 '15 at 13:58

-1

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

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

answered Jul 22 '15 at 13:58

user2520890

21
3

score -1 · Answer 9 · edited Jun 13 '23 at 18:19

-1

To hide all the video controls use this -

document.getElementById("myVideo").controls = false;

edited Jun 13 '23 at 18:19

Josef

2,869
2
22
23

answered Jun 22 '20 at 14:26

Aniket

391
5
13

zoeurk · Answer 10 · 2023-08-15T19:21:25.360

Else it's also possible like that:

html:

<audio controls id="track">
 <source src="track.ogg" type="audio/ogg" />
</audio>

javascript:

<script>
const track = document.getElementById('track');
var duree = 0;
var pause = 0;
track.play();
track.addEventListener("ended", (event) => {
  pause = 2;
  duree = 0;
  alert("fin audio");
 });
 track.addEventListener("timeupdate", (event) => {
  if(!track.seeking){
   if(pause != 3){
    duree = track.currentTime;
   }
   pause = 1;
  }
 });
 track.addEventListener("seeking", (event) => {
  if(pause == 1){
   track.currentTime = duree;
   track.pause();
  }else{
   if(track.seeking){
    pause = 3;
   }
  }
 });
 track.addEventListener("pause", (event) => {
  if(pause == 1 && track.duration != duree){
   track.currentTime = duree;
   pause = 0;
  }else{
   if(track.duration == duree){
   pause = 2;
   duree = 0;
  }
 }
 if(pause != 2){
  track.play();
 }
});
</script>

With this way you have not to hide controls
I think it's work on video too.

How to disable seeking with HTML5 video tag ?

10 Answers10

Linked