css:transform and scrubber

[commonpike]

See a JSBin of the issue here http://jsbin.com/qovayule/1

If transform:scale is applied to the video or any of its parent elements, the scrubber (or in fact any slider elements) don't correctly respond to mouse interaction. In the above jsbin, clicking halfway the scrubbers tracker positions the playhead at the end.

Its not an easy issue and its not limited to videojs. The problem is that getBoundingClientRect returns .. well ... values that don't correspond to the mouse events pageX and pageY. jQueryUI has the same problems, ao.

As an intermediate solution for users that run into this problem, I would suggest to just hide the sliders with css. If anyone knows how to disable mouse interaction on the progress bar, so we can show it non-interactive, please let us know.

[gkatsev]

That's very interesting.
What is the particular use-case for scaling the video that way using a transform?

also, you can use pointer-events: none; to prevent touch and mouse events from applying to an element.

[commonpike]

The video isnt scaled, the whole page is. The use case for transform:scale is .. when you .. want to scale things :-D

In one of my projects, the video is displayed inside a 3d environment build in html/js. Its projected on a wall, you can approach it and actually walk straight through it. In another project, the graphic design scales up/down to fit the browser window. Both work fine, apart from the slider interactions.

pointer-events:none (and cursor:default) is a good tip, thanks.

[gkatsev]

Ah, I see. That's an interesting use case.

I wonder if you could also override getBoundingClientRect to return correct values for the videojs object. That way, it could work.

Another option is to just disable the progress bar completely.

var player = videojs('video', {
  children: {
    controlBar: {
      progressControl: false
    }
  }
});

or something like that.

[commonpike]

I'm doing that now, using css. however, its pretty and useful, even without mouse interaction.

When applying pointer-events:none, clicking the scrubber pauses the movie (the click event is probably propagated). thats counter intuitive .. people will click. I would rather catch and cancel the mouseclick.

[gkatsev]

try

.vjs-progress-control.vjs-control {
  pointer-events: none;
}

.vjs-progress-control.vjs-control:before {
  content: '';
  height: 100%;
  pointer-events: auto;
  width: 100%;
}

Basically, it creates a new element behind the progress control that catches the clicks so the video itself won't toggle playback.

[commonpike]

Very nice ! This seems to work

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

[heff]

I really don't have any idea how to adjust for this case permanently. I'm open to any ideas. The player font size is what's normally used to scale the player, but it sounds like that won't work here.

I'm going to close this since it seems like a rare use case and there's no clear fix, but feel free to keep discussing.

[makker]

@heff I also have a same issue as @commonpike. We also have a 'transform: scale(n, n)' style in one of the video elements parents. And this causes the MouseTimeDisplay component, and the slider heads in SeekBar and VolumeBar to position incorrectly in relation to mouse pointer position.

I have found a way to fix this and working on implementing it to videojs. The thing is that when mouse is over the SeekBar it's position is calculated continuously. And my fix loops through video element parents and gets and multiplies their scale values from the computed styles. I feel this may affect performance and should probably be enabled with a setting.

In our case, scale is changed (to one of the video's parent elements) when window is resized. So the scale doesn't need to be calculated every time, but only after window size changes. And then it could be saved to a variable. In some other cases it only needs to be calculated once and in some other cases continuously.

So my suggestion is that there is a new option added to videojs, options.html5.calculateTransformScale with option values 'never' (default value) | 'init' | 'once' | 'windowresize' | 'always' ). Is this ok. Is the option place and name OK? How about the option values?

My fix without options can be found here:
makker@b90ef1a
https://github.com/makker/video.js/tree/fix-css-transform-issue-1102

[makker]

Improved my code so that it now saves the calculated scale on first time it's needed and updates it every time after window is resized.