基於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