使用 Vue-video-player 顯示 HLS | 點燈坊

Safari 的 <video> tag 可直接支援 HLS，但 Chrome 與 Firefox 則不行，透過 Vue-video-player 則可在 Safari、Chrome 與 Firefox 都支援 HLS。

Version

macOS Catalina 10.15.4
WebStorm 2020.1.1
Vue 2.6.11
Vue-video-player 5.0.2

Install Package

$ yarn add vue-video-player
$ yarn add videojs-contrib-hls

• vue-video-player 為跨 browser 的 video player 解決方案
• videojs-contrib-hls 支援 HLS

main.js

import Vue from 'vue'
import App from './App.vue'
import VideoPlayer from 'vue-video-player'
import 'videojs-contrib-hls'

let hls = require('videojs-contrib-hls')
Vue.use(hls)
Vue.use(VideoPlayer)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

第 3 行

import VideoPlayer from 'vue-video-player'
import 'videojs-contrib-hls'

引用 VideoPlayer 與 videojs-contrib-hls。

第 6 行

let hls = require('videojs-contrib-hls')
Vue.use(hls)

使用 hls 。

第 8 行

Vue.use(VideoPlayer)

使用 VideoPlayer。

Component

<template>
  <div>
    <video-player class="video-player" :options="playerOptions"></video-player>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'

export default {
  name: 'App',
  data: () => ({
    playerOptions: {
      sources: [{
        type: 'application/x-mpegURL',
        src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
      }],
    }
  })
}
</script>

第 8 行

import 'video.js/dist/video-js.css'

引用 video-js.css。

第 3 行

<video-player class="video-player" :options="playerOptions"></video-player>

因為 VideoPlayer 已經在 main.js 註冊，可直接使用。

需綁定 options property 提供設定。

13 行

playerOptions: {
  sources: [{
    type: 'application/x-mpegURL',
    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
  }],
}

• type 設定為 application/x-mpegURL
• src 設定為 m3u8 的 url。

Conclusion

• Vue-video-player 底層為 Video.js，它讓 Video.js 更簡單在 Vue 使用，一些進階的設定可參考 Video.js 官網

Sample Code

完整範例可在我的 GitHub 上找到

Reference

surmon-china, Vue-Video-Player
Programmer Help, vue-video-player notes (compatible with m3u8)
Stefan Lederer, 17 Free & Public MPEG-DASH and HLS Example Test Streams and Datasets