Dealing with "Cues in isolation"

Hi everyone,

The spec currently has a section called "rendering cues in isolation", see
http://dev.w3.org/html5/webvtt/#cues-in-isolation
which is empty. I'm trying to figure out how to fill this.

The section is basically supposed to explain how WebVTT files with
chapter cues are rendered:
http://dev.w3.org/html5/webvtt/#webvtt-file-using-chapter-title-text .

I've been considering how browsers will want to implement support for
chapter titles.
If any browser has implemented support for this yet, can you please
share your approach, since I am not aware of any browser supporting it
yet.

(I know that Safari 7 lists tracks of kind 'chapters', but I don't see
any rendering of the chapters.)

Approach 1: Text overlay on video

I'm aware that Jeroen wrote an article on Mozilla Hacks that proposes
a means for displaying chapters underneath the video, see
https://hacks.mozilla.org/author/jeroenwijering/as/complete/
but this takes up some viewport realestate that I would not believe
browsers want to sacrifice.

Mediaelement.js use a similar approach:
http://mediaelementjs.com/examples/?name=chapters (overlay at the top
of the video)


Approach 2: Menu

Somewhat related is this menu based approach:
http://xiph.org/video/vid1.shtml
The chapters are rendered in a drop-down menu. This allows to more
easily accommodate hierarchically structured chapters.


Approach 3: Transport bar markers

I made a demo some time ago at
http://www.html5videoguide.net/demos/google_io/3_navigation/
where the chapters are rendered as part of the transport bar with the
text in tooltips.

JWPlayer renders it similary (but much nicer looking) with dots in the
timeline that you can mouse over to get the chapter name in tooltips:
http://support.jwplayer.com/customer/portal/articles/1407454-adding-chapter-markers
I am not sure if these markers are accessible via the keyboard, but
I'm sure they can be made to be.

This last one to me seems the most likely type of approach for
browsers, since it doesn't require using extra real-estate in the
video element for displaying chapters. However, since the chapter text
is now rendered as tooltips, should we allow for any markup at all?
HTML @tilte text does not allow any markup, but only entity codes.
However, if browsers use custom tooltips, I suppose we can allow for
some more markup than we currently have?

This is the markup that is currently allowed:
* WebVTT cue text span
* WebVTT cue amp escape
* WebVTT cue lt escape
* WebVTT cue gt escape
* WebVTT cue lrm escape
* WebVTT cue rlm escape
* WebVTT cue nbsp escape

Would we want to add things like these?
* A WebVTT cue italics span.
* A WebVTT cue bold span.
* A WebVTT cue underline span.
* A WebVTT cue ruby span.
* A WebVTT cue language span.

Also, there's a whole bunch of other examples of how chapters can be
rendered here:
http://wiki.whatwg.org/wiki/Use_cases_for_API-level_access_to_timed_tracks#Chapter_Markers
Most of these include a keyframe, so that would be another option we
could eventually add to chapter markup, maybe through a data URL.

Finally, I don't know if we want to allow CSS to manipulate the
display of the chapter text.

For now, I've prepared a patch that should address the basic use case,
namely how to get CSS boxes from WebVTT cue text:
https://github.com/w3c/webvtt/pull/119

I would appreciate some proof-reading and feedback.

Thanks,
Silvia.

Received on Sunday, 14 September 2014 04:27:49 UTC