使用RequireJS加载videojs时如何正确运行videojs-vtt-thumbnails插件

错误原因 #

• 你加载的videojs-vtt-thumbnails是CommonJS格式版本，和RequireJS遵循的AMD模块规范不兼容，插件没有正常挂载到VideoJS的实例原型上
• 没有配置RequireJS的shim依赖声明，插件加载时无法识别VideoJS依赖导致注册失败，同时你的代码中存在opions拼写错误的问题

修复方案 #

1. 调整RequireJS配置，替换插件为UMD兼容版本，同时添加依赖声明：

requirejs.config({
    "baseUrl": "",
    "paths": {
        "app": "",
        "video.js": "https://vjs.zencdn.net/7.7.5/video.min",
        // 移除原路径中的.cjs后缀，使用兼容AMD规范的UMD版本
        "videojs-vtt-thumbnails": "https://cdn.jsdelivr.net/npm/videojs-vtt-thumbnails@0.0.13/dist/videojs-vtt-thumbnails.min"
    },
    // 新增shim配置，声明插件依赖video.js
    shim: {
        'videojs-vtt-thumbnails': {
            deps: ['video.js']
        }
    }
});

2. 修正调用代码的拼写错误，调整加载逻辑：

require(['video.js', 'videojs-vtt-thumbnails'], function(videojs) {
    // 修正拼写错误opions为options，可自定义播放器配置参数
    var options = {};
    var showcasePlayer = videojs('my-player', options, function () {
        showcasePlayer.vttThumbnails({
            src: '你的VTT缩略图配置文件地址'
        });
    });
});

3. 页面需提前预留对应ID的video标签，示例如下：

<video
  id="my-player"
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  data-setup='{}'>
  <source src="你的视频播放地址" type="video/mp4"></source>
</video>

内容的提问来源于stack exchange，提问作者Sergey Kozlov