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

Question

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

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

附言。我发现有几篇帖子说你可以注释掉代码中的一行，但我的版本中不存在这一行——也许插件已被重写。

Answer 1

在这里检查

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

所以例如

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

Answer 2

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

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

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

Answer 4

检查这个：

.vjs-tech {
  pointer-events: none;
}