JSFiddle - React, Tailwind, and code Playground

by Sreekesh S K

HTML

<div>Seek if you can</div>
<video id="video" controls autoplay style="width: 400px;" muted>
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

JavaScript

var video = document.getElementById('video');
var supposedCurrentTime = 0;
video.addEventListener('timeupdate', function() {
  if (!video.seeking) {
		supposedCurrentTime = video.currentTime;
  }
});
 document.getElementById('video').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        alert(111111)
    }
// 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;
});