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

Question

I am trying to use the vtt-thumbnails plugin for video.js, but either on my website or on the demo I allways get this error :

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

I am using 5.4.4 and my code looking like that :

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

Any idea ?

ps: my .vtt file already work fine with Jwplayer.*

Answer 1

This plugin was written before video.js 5.x was released. One change from version 4.x is that plugins now load earlier on. As a result of that this plugin is now trying to access the text tracks too soon. You can get around this by initialising the plugin in the ready function instead of passing it as a setup option:

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