如何禁用 HTML5 视频标签的搜索?

问题描述 投票:0回答:10

我知道这是不可取的。但仍然需要这个功能来实现。尝试了从onseeking、onseeked到媒体控制器的一切。什么都没起作用。是否有任何外部库可以禁用搜索。如果有关如何使用自定义控件的一些指示将会很有帮助。

html video html5-video
10个回答
36
投票

这个问题很老了,但仍然相关,所以这是我的解决方案:

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

它与玩家无关,即使显示默认控件也可以工作,并且即使通过在控制台中键入代码也无法规避。


3
投票

扩展@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();
    }
});

0
投票
<!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
投票

也许它可以帮助某人,我用这种方式删除所有进度控制回调。

player.controlBar.progressControl.off();
player.controlBar.progressControl.seekBar.off();

0
投票
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
投票

假设这是一个标准的 HTML5 视频播放器并且没有第三方 JS 库干扰:

这应该可以阻止他们继续前进,尽管比你的需求晚了十多年,但对其他人仍然有用......

V.onseeking = function () {
    event.preventDefault();
    alert('Please don\'t skip the tute!');
};

注意:“V”是您的玩家的 ID。


0
投票

您可以使用像 video.js 这样的 HTML5 视频播放器,并使用 CSS 隐藏搜索栏。

或者您可以为 HTML5 视频构建自己的控件。

此外,您正在寻找的事件是“寻找”。如(使用新的 jquery 事件绑定):

$(myVideoElement).on('seeking', function () { // do something to stop seeking })
    

-1
投票
使用 video js 作为我的视频播放器,而不是普通的 HTML5 版本:

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

-1
投票
要隐藏所有视频控件,请使用此 -

document.getElementById("myVideo").controls = false;
    

-1
投票
Si non c'est toujours faisable comme ça: (否则也可以这样:):

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>
使用缓存控件解决您的问题(通过这种方式,您不会隐藏控件)

© www.soinside.com 2019 - 2024. All rights reserved.