VideoJS：无法单击视频顶部/叠加层的元素答案

【问题标题】：VideoJS: Can't click on elements that are on top/overlay of the videoVideoJS：无法单击视频顶部/叠加层的元素
【发布时间】：2018-11-26 16:31:24
【问题描述】：

我正在使用 VideoJS 和 Angular 4，我需要在视频顶部添加一些自定义叠加层。我成功创建了所有叠加层并将它们与 Angular 组件上的事件挂钩。它工作得很好，除非它在 fullcsreen 中。当我全屏播放视频时，覆盖消失了，我只能使用默认播放器按钮。所以我在叠加层中添加了一个大的 z-index，它们开始出现。但是每当我点击它们时，什么都没有发生。根据 CSS，甚至光标都不会变为指针。我尝试了各种类似 videojs 覆盖插件的东西，但这不起作用，因为它不允许我将动作与元素相关联。我尝试将覆盖内容放在视频标签内，但随后它就完全消失了。我已经尝试通过 Chrome Dev Tools 网络检查器并手动删除正在路上的任何 videojs 元素的 z-index。但什么都没有发生。我总是可以看到我添加的按钮，但从不点击它们。这是我的代码：

.extra-options {
  position: absolute;
  color: #fff;
  bottom: 20px;
  right: calc(100%/2 - 150px);
  font-size: 50px;
  cursor: pointer;
  z-index: 99999999999999999;
}

.player-container {
  width: 100%;
  height: calc(100vh - 190px);
  position: relative;

  video {
    width: 100%!important;
    height: 100%!important;
    margin: 0 auto;
  }
}

<div class="player-container">
    <video id="video" class="video-js vjs-default-skin" controls></video>

    <div class="extra-options" (click)="showExtra()">More options</div>
</div>

当我们不在全屏时，“额外选项” div 会出现并正常工作。全屏时，它显示正确，但我永远无法点击它。我应该添加一个非常重要的细节：这些动作需要在 Angular 组件中有一个函数。所以“showExtra()”应该是播放器.ts文件中定义的函数。

【问题讨论】：

你能提供一个plunker吗？
showExtra 函数中有什么？如果纯粹是添加css属性，为什么不切换呢？

标签： javascript html css angular video.js

【解决方案1】：

如果您将“额外选项”div 放在视频元素中，它应该是可点击的。

<div class="player-container">
    <video id="video" class="video-js vjs-default-skin" controls>
        <div class="extra-options" (click)="showExtra()">More options</div>
    </video>
</div>

我很长时间没有使用 video-js，如果不起作用，请尝试以编程方式添加元素：(reference)

var myPlayer = videojs('my_id').ready(function(){
  var player = this;

  player.el().appendChild(CUSTOM_ELEMENT_HERE);

});

【讨论】：

【解决方案2】：

而不是将整个块制作为内联 div（仅采用视频播放器的宽度）并与right: 1px; 对齐就可以了。请发现 sn-p 很有用。

const showExtra = () => {
console.log("clicked")
}

.extra-options {
  position: absolute;
  color: red;
  bottom: 20px;
  right: 1px;
  font-size: 20px;
  cursor: pointer;
}

.player-container {
  position: relative;
  display: inline-block;
  video {
    height: 100%!important;
    margin: 0 auto;
  }
}

<div class="player-container">
    <video id="video" class="video-js vjs-default-skin" controls>       </video> 
    <div class="extra-options" onclick="showExtra()">More options</div>
</div>

【讨论】：

【解决方案3】：

        .extra-options {
          position: relative;
         color: black;
          font-size: 50px;
          cursor: pointer;
          z-index: 99999999999999999;
        }

        .player-container {
          width: 100%;
          height: calc(100vh - 190px);
          position: relative;
    }
    video#video {
        position: absolute;
    }

        <div class="player-container">
            <video id="video" class="video-js vjs-default-skin" controls></video>

            <div class="extra-options" (click)="showExtra()">More options</div>
        </div>

【讨论】：