基于videojs實現帶有播放列表播放頁面

• videojs播放器的CSS樣式修改
• • 視頻暫停不顯示播放按鈕
  • 中間播放按鈕變圓形
• 播放列表實現
• • 1、引入插件
  • 2、增加播放列表html
  • 3、增加js代碼
• 效果圖

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 thecurrently 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

總結

以上是生活随笔為你收集整理的基于videojs实现带有播放列表播放页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。