CODEWITHSUNDEEP
htmlhtml5-videovideo.js
GjjvdBurg
GjjvdBurg

Reputation: 498

Chapter tracks don't show with VideoJS

I'm creating a simple video page with video.js and I want to show chapter tracks. This is the HTML code, based on the VideoJS documentation here.

<!DOCTYPE html>
<html>
        <head>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
                <script src="http://vjs.zencdn.net/4.0/video.js"></script>
        </head>
        <body>
                <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="940" height="560" data-setup='{}'>
                <source src="myvideo.mp4" type="video/mp4" />
                <track kind="chapters" src="mychapters.vtt" srclang="en" label="English" default="default" >
                </video>
        </body>
</html>

And this is the webvtt file:

WEBVTT


Chapter 1
00:00:00.000 --> 00:16:30.000>
Sample chapter 1

Chapter 2
00:16:30.000 --> 00:42:30.000>
Sample Chapter 2

When opening this page in Chrome 27 (on Linux), the following error is displayed in the console Uncaught TypeError: Cannot read property 'id' of undefined at video.js:22. When I change kind="chapters" to kind="captions" the captions do work.

Any help would be greatly appreciated, as I can't for the life of me figure out what I'm doing wrong.

Thanks in advance.

Upvotes: 0

Views: 1941

Answers (1)

RTW2
RTW2

Reputation: 36

Unfortunately, the Chapters functionality you are looking for does not (yet) work in videojs versions 4.x -- this is a known issue:

https://github.com/videojs/video.js/issues/676

Older 3.x versions did work - I've used v3.2 successfully to deliver video with chapters -- but earlier versions of the player were not accessible nor were they responsive (without a lot of extra effort).

To quickly deal with the uncaught TypeError (not having enough time to deal with this more thoroughly), I added the following band-aid:

if (typeof component === 'undefined') return;

to the function 

vjs.Component.prototype.addChild

just before the line:

this.children_.push(component);

(in the non-minified version of v4.3 I'm using, this would be around line 1660).

This obviously does nothing to fix the broken Chapters functionality, but will catch the error being thrown.

Upvotes: 2

Related Questions