禁用/启用点击播放功能答案

【问题标题】：Disable/enable click-to-play functionality禁用/启用点击播放功能
【发布时间】：2015-10-05 00:30:01
【问题描述】：

我目前正在为 video.js 构建一个插件，该插件会在某些断点处在屏幕上呈现叠加层。但是，我无法在不启动视频的情况下单击任何叠加层。我想我需要禁用播放器上的点击播放功能。

我应该如何禁用/启用 video.js 播放器的点击播放功能？

function createBreak(breakpoint){

    player.pause();//pause the playback
    player.getChild('controlBar').hide();//hide the controlbar
    breakpoint.resolved = true;//

    var button = createEl('button',{});//adds button to video.js parent <div>
    button.innerHTML = "continue";//
    //THE PROBLEM: this button cannot be clicked (this is just a proof of concept)
    //    because clicking on it will restart the player
    //WHAT I NEED: a function that can disable the click-to-play 


}

This solution 已经存在，但它似乎只适用于旧版本的 video.js

【问题讨论】：

请将您遇到问题的代码添加到问题中。这将帮助您获得更好的答案。
我正在使用的代码没有任何具体问题，但我会发布上下文

标签： javascript video.js

【解决方案1】：

这里发生的事情是点击叠加层向下传播到 video.js 播放器。您需要做的就是停止在叠加层上传播点击事件。这意味着您无需禁用任何 video.js 播放器功能。

Mozilla Doc: Event.stopPropagation()

Event Bubble Cancellation Demo

可能适用于您的情况的内容类似于

var overlay = /* Get reference to overlay element here */
overlay.addEventListener('click', function(e) {
    functionBearingWhatEverCodeYouAlreadyHaveForOverlayClickEventIfAny();
    if(e.stopPropagation)      e.stopPropagation();
    if(e.cancelBubble != null) e.cancelBubble = true;
})

这会在叠加层停止点击事件，而不是让下面的播放器被点击。

【讨论】：

我想通了！我意识到我在用来制作原型的 css 中有pointer-events: none;。我正在使用.vjs-text-track-display 类，因为我知道它会显示在视频上……没有意识到它禁用了指针事件。谢谢你的回答，我学到了很多！

【解决方案2】：

由于 .vjs-big-play-button z-index 值设置为 2，您应该为叠加层提供更大的 z-index。然后它也会覆盖播放按钮。

【讨论】：