第一步
安裝相關(guān)依賴包：npm install --save video.js蓬痒；npm install --save videojs-contrib-hls
第二步
引入樣式文件舌涨，可以在main.js或是在需要的組件文件中引入：import 'video.js/dist/video-js.css'
第三步
在組件文件中引入相關(guān)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](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()
})
注意
如果瀏覽器后臺(tái)出現(xiàn)了如下錯(cuò)誤：
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
那么只需要在video標(biāo)簽中添加muted屬性就可以了羞延。
下面是完整的代碼
最后
如果有幫助到各位看官的話拷淘，麻煩動(dòng)動(dòng)小指頭撇他，點(diǎn)個(gè)喜歡~~謝謝啦竹习！
