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.
We can hide the controls by not adding the controls attribute to the video element. Even without controls attribute on the elements the user can view the controls section by right-clicking on the video and enabling the show controls .
just use preload="none" in your video tag and video will stop autoplay when the page is loading.
Just add controlsList="nodownload" in your video tag.
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.
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();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With