我的播放列表插件不适用于 videojs？答案

【问题标题】：my playlist plugin is not working on videojs?我的播放列表插件不适用于 videojs？
【发布时间】：2018-05-26 16:05:13
【问题描述】：

目前我想在一个项目中实现 video.js 库，并在同一个库中添加 unplugin 以制作多个视频的复制列表，但是在实现所有内容时它标记我如下：

player.playlist is not a function

我的测试的完整代码：

HTML 代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.12/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-playLists/0.2.0/videojs-playlists.js"></script>


</head>
<body>

<video id="Reproductor" class="video-js vjs-default-skin" controls
       preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
       data-setup="{}">
    <source src="TheLast.mp4" type='video/mp4'>
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>


</body>
</html>

代码 CSS：

<style type="text/css">
        .vjs-default-skin {
            color: #000000;
        }

            .vjs-default-skin .vjs-play-progress,
            .vjs-default-skin .vjs-volume-level {
                background-color: red;
            }

            .vjs-default-skin .vjs-control-bar,
            .vjs-default-skin .vjs-big-play-button {
                background: red;
            }

            .vjs-default-skin .vjs-slider {
                background: red;
            }

            .vjs-default-skin .vjs-control-bar {
                font-size: 103%;
            }
    </style>

代码 Javascript：

<script>

    $(document).ready(function() {
        var player = videojs('Reproductor');

//The problem that the browser console indicates is in the line below
        player.playlist([{
            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'
        }]);

        // Play through the playlist automatically.
        player.playlist.autoadvance(0);
    });

</script>

所有组件都在各自的位置。

【问题讨论】：

标签： javascript jquery video html5-video video.js

【解决方案1】：

那应该是player.playList，带有大写的 L。

最重要的是，sources 应该是 src，一个 URL 数组

player.playList([{
    src: ['http://media.w3.org/2010/05/sintel/trailer.mp4'],
    poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}, {
    src: ['http://media.w3.org/2010/05/bunny/trailer.mp4'],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
    src: ['http://vjs.zencdn.net/v/oceans.mp4'],
    poster: 'http://www.videojs.com/img/poster.jpg'
}, {
    src: ['http://media.w3.org/2010/05/bunny/movie.mp4'],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
    src: ['http://media.w3.org/2010/05/video/movie_300.mp4'],
    poster: 'http://media.w3.org/2010/05/video/poster.png'
}]);

【讨论】：