我知道这是不可取的。但仍然需要这个功能来实现。尝试了从onseeking、onseeked到媒体控制器的一切。什么都没起作用。是否有任何外部库可以禁用搜索。如果有关如何使用自定义控件的一些指示将会很有帮助。
这个问题很老了,但仍然相关,所以这是我的解决方案:
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;
});
它与玩家无关,即使显示默认控件也可以工作,并且即使通过在控制台中键入代码也无法规避。
扩展@svetlin-mladenov的答案,您可以执行以下操作以防止用户寻找尚未观看的视频的任何部分。这还允许用户倒回并查找之前已经观看过的视频的任何部分。
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 :)
也许它可以帮助某人,我用这种方式删除所有进度控制回调。
player.controlBar.progressControl.off();
player.controlBar.progressControl.seekBar.off();
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;
});
假设这是一个标准的 HTML5 视频播放器并且没有第三方 JS 库干扰:
这应该可以阻止他们继续前进,尽管比你的需求晚了十多年,但对其他人仍然有用......
V.onseeking = function () {
event.preventDefault();
alert('Please don\'t skip the tute!');
};
注意:“V”是您的玩家的 ID。
.vjs-default-skin .vjs-progress-holder {
height: 100%;
pointer-events: none;
}
document.getElementById("myVideo").controls = false;
html:
<audio controls id="track">
<source src="track.ogg" type="audio/ogg" />
</audio>
javascript:
<script>
const track = document.getElementById('track');
var duree = 0;
var pause = 0;
track.play();
track.addEventListener("ended", (event) => {
alert("fin audio");
});
track.addEventListener("timeupdate", (event) => {
if(!track.seeking){
duree = track.currentTime;
pause = 1;
}
});
track.addEventListener("seeking", (event) => {
if(pause == 1){
track.pause();
}
});
track.onpause = function() {
if(pause == 1){
track.currentTime = duree;
duree = track.currentTime;
pause = 0;
}
track.play();
};
</script>
使用缓存控件解决您的问题(通过这种方式,您不会隐藏控件)