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()
})
複製代碼

這裏推薦一下個人前端學習交流羣：784783012，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習編程。本身整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。