This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
Authors need a way to shrink the rectangel in which the track cues are displayed using CSS. The webvtt features for positioning are not suitable here. A typicall usecase is a scripted custom styleable mediaplayer, where the controls are placed over the video rendering area. In this case the author needs a way to "reserve" this space for those controls. Due to the fact, that this is depending on the style of a webpage and not related to the contetnt of the vtt file, it has to be defined using CSS. For example: ::cuedisplay { top: 0; left: 0; right: 0; bottom: 40px; /* space is needed for overlaying custom styleable controls at the bottom of the video */ }
Dup of https://www.w3.org/Bugs/Public/show_bug.cgi?id=17273 ?
Yes, but a new approach. I'd be curious to hear what Alexander thinks about the Viewport proposal with the reserve() function in comparison to his proposed CSS approach. While the CSS approach is a bit more limited (can basically only shrink the viewport), I like it for its simplicity.
Nice to see, that this problem is already worked on. Defining multiple "reserved" areas seems better and is more powerful than my proposal. Two short comings about the Viewport interface: 1. The coordinates are in percentages of the video's rendering area. In most cases control-bars, logos and control-buttons are defined using pixels. Reserving an area in percentages doesn't work for them. 2. They are defined using JS The main thing here, is that a video script solution can have many different theme packages (CSS). It doesn't feel right, that the author has to provide additional JS to make his style theme work. About my proposal: This was just a hasty reaction to the problem, but I think it's not only easy, but is the right solution for the discussed usecases. For 99% of all usecases, we only need to reserve the edges of the video rendering area. Top/Left logo, bottom control-bar and sometimes right edge for some additional control-buttons. Even if we reserve to much space for a logo (whole top or whole left area), it doesn't really hurt. We could define the ::cuedisplay takes the following CSS-Styles and author can change those: ::cuedisplay { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } This way, we can define reserved edges in all units (px, em, % etc.) and have full control in our stylesheet. In case you want to keep a Viewport.reserve function here, it would be interesting, that you can also pass a DOM-Object and the browsers keeps track of the dimension of this DOM object. In this case a player script can reserve the space in general and doesn't need to be changed, in case the player gets a new theme or is changing to fullscreen (for other control styles, in that case).
It seems reasonable to be able to control this with CSS, and the argument that custom controls are likely to use some other unit than percentage of the video height seems compelling.
If we can make it work, I'd much prefer a CSS approach to this, too.
I really like this proposal. It's simple and exactly what we need for the Vimeo player.
*** This bug has been marked as a duplicate of bug 22085 ***