Vue+Video.js播放m3u8視訊流

前端啟航發表於2018-10-19
VueIDEJS

首先，我們需要在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前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

相關文章