Video.js - 阻止点击播放功能

Posted

技术标签:

【中文标题】Video.js - 阻止点击播放功能【英文标题】:Video.js - preventing click-to-play functionality 【发布时间】:2013-04-11 13:49:27 【问题描述】:

我正在使用 video.js 将视频嵌入到 html 页面中。它被用作仅限 ipad 的网络应用程序,所以我相信它使用的是原生 HTML5 播放器。我正在尝试禁用点击播放功能(以便用户必须使用控件),但我在这样做时遇到了麻烦。

我已经尝试从视频/视频播放器/海报中取消绑定点击事件(使用 jQuery),并且我尝试使用 addevent 将 e.preventDefault() 添加到视频中,但这似乎都不起作用。

附言。我发现了一个couple of posts 说你可以注释掉代码中的一行,但是我的版本中不存在这行——也许插件已经被重写了。

【问题讨论】:

你有没有想过这个问题?我也在尝试这样做。 【参考方案1】:

检查这里

https://github.com/videojs/video.js/blob/master/docs/api/vjs.MediaTechController.md#removecontrolslisteners

例如

v = videojs('scene04-video');
v.tech.removeControlsListeners();

【讨论】:

链接失效了。【参考方案2】:

你可以试试这个。它帮助了我。只需将其添加到 css 文件中:

.video-js.vjs-playing .vjs-tech 
  pointer-events: none;

【讨论】:

【参考方案3】:

知道您使用的是哪个版本会很有帮助。这适用于我 4.1(最新的 api)

// Disable big-play-button
videojs.Player.prototype.options_.children.bigPlayButton = false;

// Override click handler on media object;
videojs.MediaTechController.prototype.onClick = function() ;

// Initialize video
var vid = videojs("video", );

// Show controls (since in my browser it doesn't think it needs to inititally)
vid.controlBar.show();

更新:我应该澄清以上内容仅适用于 dev.js API(不是 prod/minified 版本)。在缩小版本中,MediaTechController 的 onClick 函数名称没有保留,您无法可靠地覆盖它。在这种情况下,您可以尝试手动断开 HTML5 和 Flash 点击事件:

videojs.Html5.off('click');
videojs.Flash.off('click');

var vid = videojs("video", , function() 
  this.bigPlayButton.hide();
);

// Again - show the controlbar (optionally)
vid.controlBar.show();

【讨论】:

check .. videojs.Html5 没有名为 off() 的方法。 videojs 实例确实如此,但我认为它没有名为 click 的事件。【参考方案4】:

检查一下:

.vjs-tech 
  pointer-events: none;

【讨论】:

Downvoter,似乎这个解决方案工作正常。您能否描述一下投反对票的原因或如何改进这个答案?

以上是关于Video.js - 阻止点击播放功能的主要内容,如果未能解决你的问题,请参考以下文章

video.js 字幕无法加载

video.js 视频截图录制自定义全屏,hlsflvmp4视频播放

video.js 问题

video.js 点击播放按钮,因为网速的原因,想在视频上面显示个加载的loading。没有分了....

video.js在safari下无法播放

video.js--很赞的H5视频播放库