如何使用 HTML5 视频标签禁用搜索?
Posted
技术标签:
【中文标题】如何使用 HTML5 视频标签禁用搜索?【英文标题】:How to disable seeking with HTML5 video tag ? 【发布时间】:2012-08-07 20:48:07 【问题描述】:我知道这是不可取的。但是仍然需要实现这个功能。尝试了从寻求,寻求媒体控制器的一切。没有任何效果。是否有任何外部库可以禁用搜索。如果一些关于如何使用自定义控件的指示会很有帮助。
【问题讨论】:
搜索栏应该仍然可见,但搜索已禁用。 【参考方案1】:这个问题已经很老了,但仍然相关,所以这是我的解决方案:
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
它与玩家无关,即使在显示默认控件时也能正常工作,即使在控制台中输入代码也无法绕过。
【讨论】:
有什么理由我应该在比较 'Math.abs(delta)' 中使用 '0.01' 而不仅仅是 0? @RafaelMoni 通常最好将浮点数与某个增量进行比较,而不是绝对相等,因为它们是在硬件中实现的。在这种情况下,这样做有额外的动力,因为 currentTime 不是一个连续值。它仅采用等于视频帧开始时间的值。这可能会导致 currentTime 根据视频流、解码器和浏览器意外向后/向前跳跃的情况。随机选择 0.01 作为一个足够小的数字。 @SvetlinMladenov 搜索发生在 Microsoft Edge 40.15063.674.0 | Microsoft Edgehtml 15.15063,如果我们不断尝试。有什么办法解决吗? @PrateekAgarwal “如果我们不断尝试”是什么意思? 我尝试了 2 次,它确实在寻找。 video.currentTime 被设置为搜索时间不知道如何?【参考方案2】:扩展来自@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();
);
【讨论】:
【参考方案3】:您可以使用像 video.js 这样的 HTML5 视频播放器并使用 CSS 隐藏搜索栏。
或者您可以 build your own controls 获取 HTML5 视频。
此外,您正在寻找的事件是“寻找”。如(使用新的 jquery 事件绑定):
$(myVideoElement).on('seeking', function()
// do something to stop seeking
)
【讨论】:
你确定我可以在搜索栏还在的情况下禁用搜索吗? 你确定我可以使用 video.js 禁用搜索栏吗?可以使用videos.js为移动设备显示带有sencha touch的视频吗????仅供参考,自定义控件在您提到的链接中不可见,但代码几乎包含我需要的所有内容。【参考方案4】:<!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 :)
【讨论】:
欢迎来到 SO!请考虑添加一些文本作为解释,而不是仅代码答案。它通常更容易理解。【参考方案5】: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;
);
【讨论】:
【参考方案6】:要隐藏所有视频控件,请使用这个 -
document.getElementById("myVideo").controls = false;
【讨论】:
【参考方案7】:也许它可以帮助某人,我使用这种方式删除所有进度控制回调。
player.controlBar.progressControl.off();
player.controlBar.progressControl.seekBar.off();
【讨论】:
【参考方案8】:使用 video js 作为我的视频播放器,而不是普通的 HTML5 版本:
.vjs-default-skin .vjs-progress-holder
height: 100%;
pointer-events: none;
【讨论】:
以上是关于如何使用 HTML5 视频标签禁用搜索?的主要内容,如果未能解决你的问题,请参考以下文章