Prevent HTML5 Video Seeking

Posted on | | Visitors

Problem on IOS

If you don't want user skip part of video on HTML web page, you probably want disable controls on Video tag. However, on IOS, even you disable it, QuickPlay will still shows progress bar. Following code demonstrate how to do it.

HTML

1
2
3
<video id="video" controls autoplay muted>
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
  // delta = Math.abs(delta); // disable seeking previous content if you want
  if (delta > 0.01) {
    video.currentTime = supposedCurrentTime;
  }
});
video.addEventListener('ended', function() {
  // reset state in order to allow for rewind
	supposedCurrentTime = 0;
});