詳解vue2.0+vue-video-player實現hls播放全過程_vue.js
最近公司想做一套視訊點播服務，因為考慮到成本問題，領導希望一切都用開源系統來完成。基於這個出發點，那就肯定排除了各大雲視訊平臺（騰訊雲 音視訊點播VOD、網易雲視訊、七牛雲、阿里雲 視訊服務等）。其實這裡我還是建議購買雲視訊平臺，因為自己造輪子肯定沒有別人造的好（專門研發團隊除外、以此業務為生的公司除外），再說，雲視訊平臺服務商提供的都是一整套解決方案：收集、儲存、轉碼、播放器等，並且在cdn和彈性擴容上都能得到最大保障。
準備
視訊點播最少需要兩樣東西：流媒體服務、視訊播放器。 因為這是一篇講述前端播放器的帖子，關於流媒體服務的搭建我就pass了，以後有時間再補充新帖。
因為公司前端架構用的是vue全家桶，所以還是希望能夠找一款基於vue封裝的視訊播放器。
首先到vue社群找到了vue-dplayer,於是就install到本地測試了一下，這時候出現個問題：此播放器在播放基於hls協議的m3u8檔案時（視訊檔案在流媒體服務已經成功部署），在ios上能夠正常播放（自家協議支援良好），但是在pc的chrome上是不支援的。然後我去github上找了找資料，資料顯示Dplay（vue-dplayer就是依據Dplay封裝的）是支援hls的，只是需要引入hls.js，然後用hls對video物件進行處理。因為hls.js與Dplayer示例程式碼是針對video物件處理的，引入到專案中還需要修改vue-dplayer的一個屬性，時間緊迫，先放棄之（之後我會有一篇專門介紹Dplayer播放hls的帖子,
為什麼會用vue-video-player？
1. 我搭建的流媒體服務的管理頁面內的播放器就是用的videoJs(vue-video-player是依據videoJs封裝的)，使用之後感覺良好。
2. 百度輸入“vue video”，vue-video-player就在頂部。（哈哈，就是這麼隨意）
3. 當然還是看了demo頁，支援的協議齊全。
4. 雖然vue-video-player的github上還有些issues沒有關閉，但是自己覺得守著videoJs強大的庫與萬千使用者，總能解決問題。（迷之自信啊）
開整
安裝依賴
?| 1 |
npm
install
vue-video-player --save
|
引入樣式
?| 1 2 3 |
// 第一個是videoJs的樣式，後一個是vue-video-player的樣式，因為考慮到我其他業務元件可能也會用到視訊播放，所以就放在了main.js內
require(
'video.js/dist/video-js.css'
)
require(
'vue-video-player/src/custom-theme.css'
)
|
把VueVideoPlayer匯入並掛在到vue上
?| 1 2 3 |
//在main.js內
import VideoPlayer from
'vue-video-player'
Vue.use(VideoPlayer);
|
編寫業務元件 myPlayer.vue
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<
template
>
<
div
class
=
"container"
>
<
div
class
=
"player"
>
<
video-player
class
=
"video-player vjs-custom-skin"
ref
=
"videoPlayer"
:playsinline
|