disable mouse interaction on videojs scrubber

问题

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

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

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.

回答1:

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

来源：https://stackoverflow.com/questions/22562556/disable-mouse-interaction-on-videojs-scrubber