Video.js playlist插件报错：player.playlist is not a function 求助

嘿，我看你遇到的问题很典型，咱们一步步来排查和解决：

核心问题分析 #

你现在报错的直接原因有两个，咱们逐个说：

1. 方法名与插件不匹配：你引入的插件是 videojs-playLists（注意名字里的大写L），它暴露的API方法是 player.playLists()，但你代码里写的是 player.playlist()（小写L），自然会提示方法不存在。
2. 版本过于老旧：你用的video.js是4.12版本，这是非常早期的版本，和很多新插件兼容性很差，长远来看建议升级。

解决方案一：纠正插件方法名（适配当前旧版本） #

如果你暂时不想升级video.js，只需要把代码里的 playlist 改成 playLists 即可：

修改后的JavaScript代码：

$(document).ready(function() {
  var player = videojs('Reproductor');
  // 把 playlist 改成 playLists
  player.playLists([{
    sources: [{ src: 'http://media.w3.org/2010/05/sintel/trailer.mp4', type: 'video/mp4' }],
    poster: 'http://media.w3.org/2010/05/sintel/poster.png'
  }, {
    sources: [{ src: 'http://media.w3.org/2010/05/bunny/trailer.mp4', type: 'video/mp4' }],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
  }, {
    sources: [{ src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' }],
    poster: 'http://www.videojs.com/img/poster.jpg'
  }, {
    sources: [{ src: 'http://media.w3.org/2010/05/bunny/movie.mp4', type: 'video/mp4' }],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
  }, {
    sources: [{ src: 'http://media.w3.org/2010/05/video/movie_300.mp4', type: 'video/mp4' }],
    poster: 'http://media.w3.org/2010/05/video/poster.png'
  }]);
  // 同样这里也要改成 playLists
  player.playLists.autoadvance(0);
});

解决方案二：升级到新版video.js + 官方playlist插件（推荐） #

旧版本的video.js和第三方插件后续很难维护，建议升级到稳定新版本，使用官方维护的playlist插件：

修改后的HTML头部引用 #

<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<!-- 官方playlist插件 -->
<script src="https://cdn.jsdelivr.net/npm/videojs-playlist@5.1.0/dist/videojs-playlist.min.js"></script>

你的JavaScript代码无需修改 #

官方插件的API就是 player.playlist()，所以你原来的代码可以直接正常运行，不需要做任何调整。

额外注意事项 #

• 确保资源引入顺序正确：先引入jQuery（如果需要），再引入video.js的CSS，然后是video.js的JS，最后是playlist插件的JS。
• 测试时可以打开浏览器控制台（F12），检查是否有资源加载失败的报错，比如CDN链接是否可用。

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