Proposed solution for issue #676 "Chapters are broken in 4.x"

[Chris-DL]

Proposed solution for issue #676 "Chapters are broken in 4.x"

Added Chapters Button style in css (defaulted with speech bubble icon).

Added functionality to load chapter tracks and add menu control to player.

I welcome any feedback on the solution.

[heff]

Nice, thanks! I'll dig into it soon.

[heff]

Do you have a good example chapters webvtt file that can be used to test this with?

[heff]

I tried testing this just using the sandbox/index.html file and adding a chapters track, and I can't get the chapters control to show itself.

I can force it to show by doing player.controlBar.chaptersButton.show(), but the chapters list is empty when I do that.

And if I check player.textTracks_ after the player is ready, the text track object is there.

So for some reason it's not getting the chapters to the button. Any ideas?

[Chris-DL]

Hi @heff
Here is an example vtt file for the chapters (taken from the existing demo.captions.vtt)

WEBVTT

Chapter 1
00:00.700 --> 00:04.110
[ Heroic music playing for a seagull ]

Chapter 2
00:04.500 --> 00:05.000
[ Splash!!! ]

Chapter 3
00:05.100 --> 00:06.000
[ Sploosh!!! ]

Chapter 4
00:08.000 --> 00:09.225
[ Splash...splash...splash splash splash ]

Chapter 5
00:10.525 --> 00:11.255
[ Splash, Sploosh again ]

Chapter 6
00:13.500 --> 00:14.984
Dolphin: eeeEEEEEeeee!

Chapter 7
00:14.984 --> 00:16.984
Dolphin: Squawk! eeeEEE?

Chapter 8
00:25.000 --> 00:28.284
[ A whole ton of splashes ]

Chapter 9
00:29.500 --> 00:31.000
Mine. Mine. Mine.

Chapter 10
00:34.300 --> 00:36.000
Shark: Chomp

Chapter 11
00:36.800 --> 00:37.900
Shark: CHOMP!!!

Chapter 12
00:37.861 --> 00:41.193
EEEEEEOOOOOOOOOOWHALENOISE

Chapter 13
00:42.593 --> 00:45.611
[ BIG SPLASH ]

[heff]

If you load that as a track in sandbox/index.html in this branch, does it work for you?

[Chris-DL]

@heff

Yes, the chapters do load, but maybe the solution needs a slight tweak to not expect a "default" value for the track.

Here is what I did:

1. Create a new vtt file named "demo.chapters.vtt" with the text above and place that file into /build/demo-files/
2. In sandbox/index.html replace line 27 with:

 <track kind="chapters" src="../build/demo-files/demo.chapters.vtt" srclang="en" label="English" default></track>

1. Load up the index.html and the chapters should display.

Hopefully this helps. Please let me know if you have any other questions and comments.

[Chris-DL]

@heff Sorry, looks like my code was removed for the index.html.

<track kind="chapters" src="../build/demo-files/demo.chapters.vtt" srclang="en" label="English" default></track>

[heff]

Ah, yeah, the default is what I was missing. I'm not sure if default should be required to show the chapters menu or not. None of the browsers I'm trying seem to support chapters natively, so can't tell from that, but my guess is that it shouldn't require a default. Also none of the other track menus require a default to show the menu.

So far this is looking great. I'm seeing one weird double title issue, where I can see "chapters" twice in the menu. Are you seeing this?

[rcrooks]

I like this(!), but might be better if the list could show chapter titles (if any) instead of just numbers.

Robert
-- 
Robert Crooks
Director of Learning Services

From: Steve Heffernan notifications@github.com
Reply: videojs/video.js reply@reply.github.com
Date: May 21, 2014 at 7:10:24 PM
To: videojs/video.js video.js@noreply.github.com
Subject:  Re: [video.js] Proposed solution for issue #676 "Chapters are broken in 4.x" (#1221)

Ah, yeah, the default is what I was missing. I'm not sure if default should be required to show the chapters menu or not. None of the browsers I'm trying seem to support chapters natively, so can't tell from that, but my guess is that it shouldn't require a default. Also none of the other track menus require a default to show the menu.

So far this is looking great. I'm seeing one weird double title issue, where I can see "chapters" twice in the menu. Are you seeing this?

—
Reply to this email directly or view it on GitHub.

[heff]

Actually that's a good point. The demo file we're using is really captions, so not the great at showing a real use case. We should try the one from this example.
http://www.html5videoguide.net/demos/google_io/3_navigation/
direct file link
http://www.html5videoguide.net/demos/google_io/3_navigation/webvtt_talk_navigation.vtt

In both that example, and this one from html5 doctor it would seem the best approach is to show the cue ID plus the cue text. e.g. if ID is "Chapter 1" and text is "Introduction", the menu item should read "Chapter 1: Introduction".

It might be good to find other chapter file examples/recommendations as well.

[heff]

@silviapfeiffer, is it pretty standard that for a chapters vtt file, you should combine the cue ID and the cue text to create the link text for a chapter, e.g. "Slide 1: Title Slide" in your example?

[Chris-DL]

@heff, I made a couple of changes in the last commit to remove the default requirement as well as fixing the duplicate chapter menu display. I imagine it would be easy enough to have the chapters show the cue ID plus the cue text if necessary.

Here is an example screenshot

[heff]

@Chris-DL, great! I think it would be good to add cue text to this, and increase the width of the chapters menu to account for that. We may need to consider what to do with long titles, though the wrapping that it does by default might be good enough.

@mmcc, do you think you could add 'list' and 'list2' from icomoon to our set?

[mmcc]

Yep, I'll get those added. Reeeally wish we had a timeline for the new Ionicons release, but I'll update the font in the meantime.

[silviapfeiffer]

@heff My example is just that. I don't think the ID needs to be exposed. In fact, we haven't got anything specified in the WebVTT spec yet about how to render Chapters, so any experience that you have and want to share/standardise would be useful!

[Chris-DL]

@heff, just checking in to see how I should proceed. I did use the cue ID to display the chapter info, but I suppose it really isn't necessary as the cue text could be modified to show the same.

For example:
WEBVTT

1
00:00.700 --> 00:04.110
Chapter 1: [ Heroic music playing for a seagull ]

2
00:04.500 --> 00:05.000
Chapter 2: [ Splash!!! ]

As for accounting for the case of long titles, my css skills aren't the greatest, but if you point me in the right direction I'll put in a fix to get it all wrapped up.

[heff]

@Chris-DL Yeah, actually I think you're right on the cue text part. And ID is actually optional as far as I know, so probably better to not require that by building it into the menu.

For the long titles, I think I'd just make the chapters menu wider. Probably something like this:

.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 20em;
}

[silviapfeiffer]

Just confirming: yes, cue IDs are optional. If you want to use markup in the chapters, maybe best to stick with the ones WebVTT knows.

For example:
WEBVTT

1
00:00.700 --> 00:04.110
Chapter 1: Heroic music playing for a seagull

2
00:04.500 --> 00:05.000
Chapter 2: Splash!!!

[Chris-DL]

@heff I removed the requirement for the cue ID and added in the small style change to widen the menu content. I've included another screenshot so you can view it. Feel free to make any other comments, suggestions, and/or changes.

[heff]

Sorry for the delay on this, I was traveling. I just merged it in and made few tweaks to the styles, to make the menu a little wider and center it on the button.

.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 24em;
  left: -12em;
}

Thanks for helping fix this, Chris! And thanks for the input, Silvia!

[Chris-DL]

@heff I'm glad I could help out.

[silviapfeiffer]

@heff any time :-)

[Globulopolis]

Can we add a markers on the timeline, so we could see which chapter is now playing?!

[heff]

@Globulopolis, I think that could be nice to see but I don't believe there's a standard UI around how the current chapter should be shown on the timeline. Are you able to find other examples of where that's used? I think that should start as a video.js plugin so we can experiment with how that would look/work before making that the default. Would you be interested in making one?

[Globulopolis]

@heff, look at the picture. When we mouseover on the timeline we can display chapter name in the tooltip. I think we could enlarge the marker when it's mouseovered.
Default state
Mouseover(screen from default state)

PS! Unfortunately my knowledge in javascript is very bad :-(

[heff]

@Globulopolis Yeah, that looks good to me. I'd still like to see someone build it as a plugin first.

[silviapfeiffer]

The proposed approach by @Globulopolis has been common for chapter markers for a while, see http://wiki.whatwg.org/wiki/Use_cases_for_API-level_access_to_timed_tracks#Chapter_Markers for a collection that we put together when researching for the <track> element.

[heff]

Wow, that's a great collection! One potential issue I'm worried about is conflicts with other plugins that put markers on the bar in the same way, e.g. advertising or other timed annotations. I'm not sure exactly how we'd distinguish between them visually, so I don't want to step on any toes by showing the captions markers by default. We could definitely start with an option to turn them on.