0

我正在使用 video.js 创建一个简单的视频页面，并且我想显示章节曲目。这是 HTML 代码，基于此处的 VideoJS 文档。

<!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>

这是 webvtt 文件：

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

在 Chrome 27（在 Linux 上）中打开此页面时，在控制台Uncaught TypeError: Cannot read property 'id' of undefined中显示以下错误video.js:22。当我更改kind="chapters"为kind="captions"字幕时确实有效。

任何帮助将不胜感激，因为我一生都无法弄清楚我做错了什么。

提前致谢。

4

1 回答 1

2

不幸的是，您正在寻找的章节功能（尚未）在 videojs 版本 4.x 中工作 - 这是一个已知问题：

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

较旧的 3.x 版本确实有效 - 我已成功使用 v3.2 来提供带有章节的视频 - 但较早版本的播放器无法访问，也无法响应（无需付出很多额外的努力）。

为了快速处理未捕获的 TypeError（没有足够的时间更彻底地处理），我添加了以下创可贴：

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

到函数

vjs.Component.prototype.addChild

就在该行之前：

this.children_.push(component);

（在我使用的 v4.3 的非缩小版本中，这将在第 1660 行左右）。

这显然无法修复损坏的章节功能，但会捕获抛出的错误。

于 2014-01-23T18:54:52.090 回答