首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >为video.js创建播放列表

为video.js创建播放列表
EN

Stack Overflow用户
提问于 2013-09-28 14:46:51
回答 2查看 12.6K关注 0票数 3

我完全是个新手。我已经设法让video.js在我的网站上工作,但我需要创建有视频可供选择的播放列表。有什么简单的方法可以做到这一点吗?

谢谢

EN

回答 2

Stack Overflow用户

发布于 2016-11-18 22:38:31

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
EN

Stack Overflow用户

发布于 2013-09-30 18:27:14

有几个播放列表插件你可以尝试一下。它们都列在plugins page上。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19068167

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文