[webvtt] Behavior with controls, particularly non-native controls, overlap (#503)

gkatsev has just created a new issue for https://github.com/w3c/webvtt:

== Behavior with controls, particularly non-native controls, overlap ==
What should be the expected behavior of cues when controls or obscure the cues?

According to the spec, cue rendering should be re-done when the native controls are shown (steps 4 and 5 of [the Processing Model](https://w3c.github.io/webvtt/#processing-model)). There are two corresponding tests on WPT
https://github.com/web-platform-tests/wpt/blob/master/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html
https://github.com/web-platform-tests/wpt/blob/master/webvtt/rendering/cues-with-video/processing-model/disable_controls_reposition.html

This leads to two questions:
1. The browsers have different behavior around this. Should the spec define a consistent behavior?
2. A lot of video players nowadays do not use native controls, but try to rely on native caption support. How can we better support this use case?

For 1,
Here are the current behaviors in Chrome, Firefox, and Safari:
- Chrome will move a cue up to not overlap with the control bar and then leave the cue there for the remaining duration of the cue.
- Firefox will move the cue up and leave it there unless another cue is rendered, in which case the moved up cue will move back down.
- Safari moves the cues up and then immediately back down when the controls collapse.

In addition, it can lead to interesting bugs, where due to Chrome's taller controls section, cues may end up getting re-ordered which can confuse the viewer since the cues are reversed from the expected order. https://bugs.chromium.org/p/chromium/issues/detail?id=1141592#c_ts1630084590

For 2,
Since WebVTT limits which CSS properties are allowed, it isn't possible to target `::cue` with something like `bottom: 3em` or a `transitionY(-3em)`. However, Chrome and Safari provide a pseudo-element for the text track display area that could have a transform applied to it when the controls are active. For example:
```css
video::-webkit-media-text-track-display {
  transform: transitionY(-3em);
}
```
Firefox does not have such a mechanism. Though, even this isn't ideal because if there are cues at the top of the video it could push them out of view.

The only reliable cross browser way of moving cues so that they aren't obstructed by the control bar is to modify their `line` property. While this works easily for simple cues, it could get complicated for non-simple cues, like those that are positioned or are inside of regions.

Otherwise, you either accept that captions will be obstructed by the controls, or no longer use native rendering of captions. Both options aren't ideal.

Please view or discuss this issue at https://github.com/w3c/webvtt/issues/503 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 10 March 2022 17:08:03 UTC