基于videojs实现带有播放列表播放页面

videojs播放器的CSS样式修改

videojs原生的样式有些比较不符合个人习惯，就做了部分修改。

视频暂停不显示播放按钮

增加一个css样式即可：

.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started .vjs-big-play-button {
	    display: block;
	}

中间播放按钮变圆形

CSS样式如下：

.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

播放列表实现

1、引入插件

a、videojs-playlist.js 播放列表js插件
b、videojs-playlist-ui.css 播放列表ui-css插件
c、videojs-playlist-ui.js 播放列表ui-js插件
如下图：

2、增加播放列表html

 <div class="vjs-playlist playlist-container">
	 <!--
	   The contents of this element will be filled based on the
	   currently loaded playlist
	 -->
</div>

3、增加js代码

var player = videojs('example');
 
	player.playlist([{
	  name:'trailer',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:52,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
	    type: 'video/mp4'
	  }],
	  //视频封面地址
	  poster:'http://media.w3.org/2010/05/sintel/poster.png',
	  //右侧视频播放列表的图片
	  thumbnail: [
	  	{//默认图片
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
	  	}
  	  ]
	}, {
	  name:'tears-of-steel',//视频标题
	  description:'Explore the depths of our planet\'s oceans.',//视频描述
	  duration:734,//视频总时长，单位秒(s)
	  sources: [{//视频资源地址以及视频的MIME类型
	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
	    type: 'application/x-mpegurl'
	  }],
	  //视频封面地址
	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
	  
	  thumbnail: [
	  	{//默认图片
          srcset: 'img/jinjihu.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
	  	{//实际视频缩略图图片
	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
	  	}
  	  ]
	}]);
player.playlistUi();

效果图

videojs播放的集成，这里不做说明

代码源码：
https://github.com/hbchenjuun/videojs-playlist