首页 文章

VideoJS：无法点击视频顶部/叠加层上的元素

提问于
浏览 次
5

我正在使用VideoJS和Angular 4，我需要在视频之上添加一些自定义叠加层 . 我成功创建了所有叠加层并将它们连接到Angular组件上的事件 . 除了在fullcsreen中，它完美地工作 . 当我将视频全屏显示时，叠加层消失，我只能使用默认的播放器按钮 . 所以我在叠加层上添加了一个很大的z-index，它们就开始出现了 . 但每当我点击它们时，都没有任何反应 . 根据CSS，甚至光标都不会变为指针 . 我尝试了各种各样的东西，比如videojs overlay插件，但这不起作用，因为它不允许我将一个动作与一个元素相关联 . 我已经尝试将叠加内容放在视频标记内，但之后它就完全消失了 . 我已经尝试浏览Chrome Dev Tools Web检查器并手动删除正在运行的任何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文件中定义的函数 .

javascript html css angular video.js

3 回答

  • 0

    而不是采取整个块使div作为内联（仅采用视频播放器的宽度）和右对齐 right: 1px; 将do.please找到有用的片段 .

    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>
    回复于
  • 1

    如果你将“extra-options”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>

    我没有尝试以编程方式添加元素：（reference）

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

  player.el().appendChild(CUSTOM_ELEMENT_HERE);

});
    回复于
  • 0
    .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>
    回复于

相关问题