javascript - VideoJS:无法单击视频顶部/叠加层的元素
问题描述
我正在使用 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文件中定义的函数。
解决方案
而不是将整个块制作为内联 div(仅采用视频播放器的宽度)并与将做右对齐right: 1px;
。请找到有用的片段。
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>
推荐阅读
- shell - 为什么这个简单的 shell 代码输出为“/dev/fd/11”?
- python - 获取 BigQuery 表中的行数(流式缓冲区)
- excel - 为每个数据透视表创建图表
- javascript - 使用递归(并且不使用循环)展平嵌套数组
- dart - Stream 可以一次听一次还是一般听一次?
- streaming - 将 BUTT 连接到第二个广播流
- python - RuntimeError:字典在迭代期间改变了大小 - 如何解决?
- django - 将函数视图转换为基于类的视图
- html - 用 2 个具有固定和动态高度的元素填充 100vh
- javascript - onUpdate 方法在 react-custom-scrollbars 中不起作用