flv.js是什么?
flv.js就是由 bilibili 網站開源的 HTML5 Flash 視頻(FLV)播放器尊沸,純原生 JavaScript 開發(fā)(ECMAScript 6 編寫) 斤彼,沒有用到 Flash桅滋。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流,并實時轉封裝為 fmp4 诬像,通過 Media Source Extensions 喂給瀏覽器怠褐,實現(xiàn)了 FLV 格式視頻的播放畏梆。
flv.js的特點:
具有H.264 + AAC / MP3編解碼器播放功能的FLV容器
多段分段視頻播放
HTTP FLV低延遲實時流播放
通過WebSocket進行FLV實時流播放
與Chrome,F(xiàn)ireFox惫搏,Safari 10,IE11和Edge兼容
極低的開銷蚕涤,瀏覽器可以加速硬件筐赔!
flv.js使用步驟
1、準備一個flv格式的視頻
我的文件揖铜,關于分片上傳可參考 vue中使用Plupload分片上傳
flv格式視頻
2茴丰、下載flv.js
npm install --save flv.js
3、引用
import flvjs from 'flv.js'
我之前是引用了這個 但是直接導致了ie11進不去報錯“語法錯誤”天吓,所以我換成了下面的引用
import flvjs from 'flv.js/dist/flv.min.js'
4贿肩、使用
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement')
var flvPlayer = flvjs.createPlayer({
type: getFileSuffix(row.fileName),
url: this.getCurrectUrl(row.issueUrl.substr(1))
})
flvPlayer.attachMediaElement(videoElement)
flvPlayer.load()
flvPlayer.play()
}