"player.textTracks is undefined" 和 video.js vtt 缩略图

Question

我正在尝试为 video.js 使用 vtt-thumbnails 插件，但无论是在我的网站上还是在演示中，我总是遇到此错误：

TypeError: player.textTracks(...) is undefined

我正在使用 5.4.4，我的代码看起来像这样：

<script src="/videojs/video.js"></script>
<link href="/videojs/default.css" rel="stylesheet">
<script src="/videojs/videojs.thumbnails.js"></script>
<link href="/videojs/videojs.thumbnails.css" rel="stylesheet">

<video id="thevideo" class="video-js vjs-default-skin"  preload="auto" controls="controls" autoplay loop poster="poster.jpg">
<source src="file.mp4" type="video/mp4" />
<track kind="metadata" src="vtt.php" default>
</video>

<script>
// initialize video.js
var video = videojs('thevideo',{plugins:{thumbnails{width:120,height:90}}});
<script>

有什么想法吗？

ps: 我的 .vtt 文件已经可以在 Jwplayer 上正常运行了。*

Answer 1

此插件是在 video.js 5.x 发布之前编写的。与版本 4.x 相比的一个变化是插件现在可以提前加载。因此，该插件现在试图过早地访问文本轨道。您可以通过在就绪函数中初始化插件而不是将其作为设置选项传递来解决此问题：

var video = videojs('thevideo', {}, function(){
  this.thumbnails({width:120,height:90});
});

"player.textTracks is undefined" 和 video.js vtt 缩略图

"player.textTracks is undefined" with video.js vtt-thumbnails

video

video.js