javascript - 禁用/启用点击播放功能

Question

我目前正在为 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

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

这将停止叠加层的点击事件，并且不会让下面的播放器被点击。