Question

我知道这是不可取的。但仍需要实现此功能。从寻求，探索到媒体控制器尝试了一切。没有任何效果。是否有任何外部库禁用搜索。如果有关如何使用自定义控件的一些指示，将会有所帮助。

Answer 1

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

或者你可以build your own controls获取HTML5视频。

此外，您正在寻找的事件是“寻找”。如（使用新的jquery事件绑定）：

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

Answer 2

<!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 :)

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

Answer 4

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;
});

Answer 5

要隐藏所有视频控件，请使用此-

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

Answer 6

将视频js作为我的视频播放器，而不是香草HTML5版本：

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

如何禁用HTML5视频标签？

6 个答案: