为 video.js 创建播放列表答案

【问题标题】：Create playlists for video.js为 video.js 创建播放列表
【发布时间】：2013-09-28 14:46:50
【问题描述】：

我对此完全陌生。我已经设法让 video.js 在我的网站上运行，但我需要创建带有可供选择的视频的播放列表。有没有简单的方法可以做到这一点？

谢谢

【问题讨论】：

【解决方案1】：

<link href="videojs-playlist-ui.vertical.css" rel="stylesheet">

<script src="videojs.min.js"></script>
<script src="videojs-playlist.js"></script>
<script src="videojs-playlist-ui.min.js"></script>

//The HTML Code

    <video autoplay id="player" class="video-js vjs-fluid" controls>
        <source src="somevideo.mp4" type="video/mp4">
    </video>

    <div class="playlist-container  preview-player-dimensions vjs-fluid">
        <ol class="vjs-playlist"></ol>
    </div>

// Your script
<script>
    var player = videojs('player');

    player.playlistUi();

    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>

// 参考 https://www.npmjs.com/package/videojs-playlist

【讨论】：

【解决方案2】：

您可以尝试一些播放列表插件。他们在plugins page 上列出。

【讨论】：