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;
});
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();
}
});
<!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 :)
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;
});
9条答案
按热度按时间slsn1g291#
这个问题很老了，但仍然很重要，所以我的解决方案是：
JsFiddle
它与玩家无关，即使显示默认控件也能工作，即使在控制台中键入代码也无法绕过它。
oymdgrw72#
从@svetlin-mladenov扩展答案，您可以执行以下操作以防止用户查找尚未观看的视频的任何部分。这还将允许用户倒带并找出先前已经观看的视频的任何部分。
qgelzfjb3#
apeeds0o4#
也许可以帮助到别人，我用这种方法去掉了所有的进度控制回调。
nzk0hqpo5#
zz2j4svz6#
假设这是一个标准的HTML5视频播放器，没有第三方JS库的干扰：
这应该会阻止他们死在他们的轨道上，虽然晚了十多年才满足你的需要，但对别人仍然有用...
注：“V”是玩家的ID。
g9icjywg7#
要隐藏所有视频控件，请使用此-
scyqe7ek8#
你可以使用一个HTML5视频播放器，比如video.js，并使用CSS来隐藏搜索栏。
或者你可以build your own controls为HTML5视频。
此外，您正在寻找的事件是“寻找”。如（使用新的jquery事件绑定）：
eyh26e7m9#
使用video js作为我的视频播放器，而不是vanilla HTML5版本：