在 videojs 洗涤器上禁用鼠标交互答案

【问题标题】：disable mouse interaction on videojs scrubber在 videojs 洗涤器上禁用鼠标交互
【发布时间】：2014-03-21 15:11:50
【问题描述】：

有谁知道如何在 videojs 默认皮肤的进度条（“scrubber”）上禁用鼠标交互？

我想展示它 - 它很有用 - 但由于我的视频位于“transform:scale”内，因此鼠标交互、拖动和单击是不正确的。在此处查看 jsbin http://jsbin.com/qovayule/1/edit

我放弃了尝试修复鼠标交互 - 它是浏览器的事情，而不是 videojs 的事情。在这里查看我提交给 videojs 的问题：https://github.com/videojs/video.js/issues/1102

但如果我可以在进度条上禁用鼠标交互，并隐藏音量滑块，客户端可能会很高兴。

【问题讨论】：

标签： progress-bar html5-video mouseevent video.js

【解决方案1】：

从 github 跟踪器，我得到了这个建议。似乎工作得很好：

/* these elements are problematic with transform:scale */
.scaledstuff .vjs-progress-control { pointer-events:none; }
.scaledstuff .vjs-progress-control:before {
    background-color: rgb(0, 0, 0); content: '';
    height: 100%; width: 100%; pointer-events: auto;
}
.scaledstuff .vjs-volume-control { display:none; }

/* but work fullscreen */
.scaledstuff .vjs-fullscreen .vjs-progress-control { pointer-events:auto; }
.scaledstuff .vjs-fullscreen .vjs-progress-control:before { display:none; }
.scaledstuff .vjs-fullscreen .vjs-volume-control { display:block; }

【讨论】：