Geek Answers Handbook

How to disable search using HTML5 tag?

I know this is not practical. But this function must be implemented. Tried everything from onseeking, onseeked to a media controller. Nothing succeeded. Are there any external libraries to disable search. it would be helpful if some pointers on how to use custom controls.

+5
source share
6 answers

The question is pretty 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

This is a player’s agnostic, it works even when the default controls are displayed, and they cannot be bypassed even when entering the code in the console.

+24
source

You can use an HTML5 video player like video.js and use CSS to hide the search bar.

Or you could create your own controls for HTML5 video.

In addition, the event you are looking for is a “search.” As in (with the new jquery event binding):

 $(myVideoElement).on('seeking', function(){ // do something to stop seeking })
0
source 
 <!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 :)
0
source

Extending the answer from @ svetlin-mladenov, you can do the following so that the user does not search for any part of the video that has not yet been watched. It will also allow the user to rewind and search for any part of the video that has already been watched before.

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

With js video as my video player and not with vanilla HTML5 version:

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

More articles:


All Articles