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

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

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

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

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

【问题讨论】：

你有没有想过这个问题？我也在尝试这样做。

标签： html html5-video video.js

【解决方案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，似乎这个解决方案工作正常。您能否描述一下投反对票的原因或如何改进这个答案？