在videojs scrubber上禁用鼠标交互 [英] disable mouse interaction on videojs scrubber

问题描述

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

Does anyone know how to disable mouse interaction on the progress bar (the 'scrubber') of the videojs default skin ?

我想要显示它 - 它很有用 - 但由于我的视频位于'transform：scale'内，因此鼠标交互，拖动和点击是不正确的。在这里查看jsbin
http://jsbin.com/qovayule/1/edit

I want to show it - it's usefull - but since my video's are inside a 'transform:scale', the mouse interaction, dragging and clicking, is incorrect. See a jsbin here http://jsbin.com/qovayule/1/edit

我放弃了尝试修复鼠标交互 - 它是一个浏览器的东西，而不是videojs的东西。请参阅我在此处提交给videojs的问题： https://github.com/videojs/video。 js / issues / 1102

I gave up on trying to fix the mouse interaction - its a browser thing, not a videojs thing. See the issue I committed to videojs here: https://github.com/videojs/video.js/issues/1102

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

But if i can just disable mouse interaction on the progress bar, and hide the volume slider, the client is probably happy.

推荐答案

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

From the github tracker, i got this suggestion. Seems to work very nice:

/* 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; }

这篇关于在videojs scrubber上禁用鼠标交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！