Is there any wat to display m4v chapters in a rapidweaver player


(Jonah Lee Walker) #1

I have some h.264 mv4 videos with chapters and I want to be able to skip and/or display chapters? I will buy a plug in if hecessary, but I really want my video chapters to show up.


(Jonah Lee Walker) #2

Is there no way to display M4v chapters within Rapidweaver? I used to do this years ago with Quicktime. Can anyone help?


(Will Woodgate) #3

M4V (basically an MP4 file) will get handled by web browsers as a single video file. I believe that Quicktime previously used proprietary meta data encoded into video files, to handle chapters and display a DVD-style menu or split a progress bar into multiple segments. That won’t work on the web.

The Player stack (disclosure: I am the developer) supports captions and subtitles fed into a video file using separate VTT files. Possibly (and this is untested) you could leverage the same feature to insert your chapter marks against your video.

I don’t know how those chapter marks will get displayed. I would think you’d have to disable custom controls and use default browser controls, in the Player stack settings. From what I see, chapter marks get rendered as dots in the native web browser video scrub bar.

This example proves that chapters in HTML5 video presented online is possible:
http://www.html5videoguide.net/demos/google_io/3_navigation/

If you go into the source code for that example webpage, you can see how their VTT file is written:
http://www.html5videoguide.net/demos/google_io/3_navigation/webvtt_talk_captions.vtt

You could try something similar with the Player stack. I provide a free demo version of the stack for you to download and try.

To replicate something whereby you have a list of chapters (and a person can click and jump to a specific chapter) would most likely require a custom stack or pitched as an idea for a new stack. It requires quite complex Javascript and to my knowledge nothing like that exists for RapidWeaver currently.


(Will Woodgate) #4

Actually on closer inspection of the source code in the above example, it appears they have 2 VTT files in use. One handles the on-screen subtitles (the same as what we do in the Player stack) and a second sets the chapter marks:
http://www.html5videoguide.net/demos/google_io/3_navigation/webvtt_talk_navigation.vtt

They are then using Javascript to dynamically read the chapter marks VTT file and generate the menu you see on the right.