Chapter Thumbnails.

[chemoish]

Maybe similar to https://github.com/funnyordie/videojs-relatedCarousel

I see there is text track support. Is there a way to interact with these elements to provide custom templating?

Or do I need to manually define tracks/cues via a custom plugin?

[heff]

Can you describe what you mean by custom templating?

Sent from mobile

[chemoish]

To be able to transform any of the TextTrack menu's to something more visual.

From:

To perhaps:

I am not sure if this is possible as the TextTrack only takes kind: 'chapters' and I don't know how you would integrate meta data like:

• Chapter title
• Chapter image
• Etc.

[OwenEdwards]

The Chapters track (kind: 'chapters') follows a standard format for WebVTT, which is identical to the Captions and Subtitles (and Descriptions) format.

It would be possible to style the Chapters menu control using CSS to change fonts, colors etc., but to add thumbnails (either for existing chapters in the chapters track, or for a more general case), this is typically done with a track of kind: 'metadata', and custom JavaScript handling (See http://www.kaizou.org/2013/03/subtitles-and-chaptering-using-text-tracks/ for some extra information on handling tracks in JavaScript). It would make for a great plug-in, but typically wouldn't be part of the core video player, since there's no standard way to implement timeline thumbnails.

[chemoish]

Thanks for the information. I'll see if I can go about making a plugin for it. #fewyearsbehind

[chemoish]

@OwenEdwards If possible, one last direction would be helpful.

After reading:

• http://dev.w3.org/html5/webvtt/#webvtt-cues
• https://html.spec.whatwg.org/#dom-texttrack-kind-metadata
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format
• http://www.kaizou.org/2013/03/subtitles-and-chaptering-using-text-tracks/
• http://www.html5rocks.com/en/tutorials/track/basics/

It seems like most of the time cue.text is going to be one line, but might actually contain multiple lines (since they follow the same WebVTT format—Which seems like it can mess up both the Chapter and Caption [Rather all WebVTT content] menu generation?).

This may cause cue.text to be rendered with associated tags or embedded cue times. However, none of resources specifies clear examples of kind=metadata usage.

html5rocks specifies WebVTT format for cue.text is to accept both HTML and JSON.

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
<p>Multi-celled organisms have different types of cells that perform specialised functions.</p>
<p>Most life that can be seen with the naked eye is multi-cellular.</p>
<p>These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.</p>

NOTE OR…

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Multi-celled organisms",
"description": "Multi-celled organisms have different types of cells that perform specialised functions.
  Most life that can be seen with the naked eye is multi-cellular. These organisms are though to
  have evolved around 1 billion years ago with plants, animals and fungi having independent
  evolutionary paths.",
"src": "multiCell.jpg",
"href": "http://en.wikipedia.org/wiki/Multicellular"
}

However, reading WebVTT specifications it mentions that cue.text should only include cue components (http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-components).

My thought would be to do the following:

• Exclude chapters entirely or
• Set the chapter's mode to hidden (somehow) after player.addRemoteTextTrack

https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L629 doesn't seem to allow for mode/onload alterations.

Then…

player.addRemoteTextTrack({
    kind:     'metadata',
    label:    '...',
    language: '...',
    src:      'meta.vtt'
});

<!-- meta.vtt -->

Chapter 1
00:00:00.000 --> 00:05:00.000
{
    "title": "Introduction",
    "image": "introduction.jpg"
}

Then...

let player = videojs('id');

let json = JSON.parse(player.textTracks().item(0).cues[0]);

// Build something custom…

[OwenEdwards]

@chemoish exactly - use a metadata track with JSON describing whatever you want, and then render it into the form of navigation control you want. Listen for cuechange events on the track to update the current location. As you mention, it would make sense for the plug-in to check for and disable any Chapters track.

I believe the limitation on cue.text mentioned in the WebVTT spec is just meant to specify what the video player's rendering engine needs to support in terms of displaying Subtitles, Captions, Descriptions and Chapters tracks (although it can ignore certain features, e.g. voice and ruby); metadata tracks are explicitly not displayed by the player, so as long as they can be processed by the track parser (e.g. vtt.js), you can put anything in each cue.text, except an empty line (see http://dev.w3.org/html5/webvtt/#dfn-webvtt-metadata-text).

EDIT: Also see Jason Ronallo's excellent work on WebVTT

Good luck with this, and let me know how it goes!