Vue+Video.js播放m3u8視頻流

首先，咱們須要在vue工程中安裝video.js相關依賴。

npm install --save video.js
npm install --save videojs-contrib-hls

而後，咱們須要引入videojs的css文件，例如在main.js中引入

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

接着，咱們在須要播放視頻的頁面引入js對象

import videojs from 'video.js'
import 'videojs-contrib-hls'

指定一個video容器，例如：

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
    <source src="http://127.0.0.1:7086/aaa/213/stream/1.m3u8" type="application/x-mpegURL">
</video>

最後，咱們在mounted節點初始化播放器：

videojs('my-video', {
    bigPlayButton: false,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})

以上就是如題最簡單的實現，更多需求請自行閱讀video.js相關api或者持續關注此博客。