fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐
一、前言
最近遇到個需求，有個監(jiān)控視頻需要在網(wǎng)頁實時播放，后臺提供了flv流、m3u8流和rtmp流。
我一聽，這不是小事一樁，前兩年才做過的需求，就隨口應了下來。
二、 過程
1、開端
說到實時播放，一般都是想到rtmp流，隨便一搜帖子（忘記看帖子時間了），就能看到以下兩個插件。
cnpm install video-js -S cnpm install videojs-flash -S
跟我印象中之前用的一模一樣。
簡單瀏覽了下帖子的使用過程，我就打算動手敲了。
2、出師不利
video-js還是能正常下載的，但到了video-js-flash就一直下載失敗了。
這時我突然想起2020年12月，谷歌就不再支持flash插件了，這導致許多基于flash實現(xiàn)的視頻流播放插件都失效，vue-video-player和vue-flash首當其沖。
3、峰回路轉--參考舊項目
由于項目后臺給我們提供了三種視頻流，所以我們的選擇也比較多。
同時因為是jsp舊項目改造成vue項目，我就想看看之前用的是什么插件，原來是flv.js。
這不就是小破站用的技術嗎，純js開發(fā)，沒用到flash，這兼容性肯定更好吧。
4、flv.js
確定了所用插件，接下來的步驟就比較簡單了，無非就是下載，引入，看例子寫法照著抄就可以了。
cnpm i flv.js
下面提供一下demo，demo里是多個flv流多窗口播放的方式，如果只有一個flv需求播放，就簡化一下就可以了，其他大家隨便看看吧。
<template>
<div>
<div id="video-container">
<div class="video-box" v-for="(video,index) in videoList" :key="index">
<video :id="'video'+index" ref="videoElement" controls autoplay muted ></video>
</div>
</div>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
data() {
return {
videoPlayer: null,
videoList: [
{
src: 'flv視頻流地址'
}
]
};
},
mounted() {
this.playVideo()
},
methods: {
playVideo(){
this.vloading = true;
this.videoList.forEach((item,index) => {
if (flvjs.isSupported()) {
let player = null;
let videoElement = document.getElementById("video" + index);
player = flvjs.createPlayer({
type: "flv", //=> 媒體類型 flv 或 mp4
isLive: true, //=> 是否為直播流
hasAudio: false, //=> 是否開啟聲音
url: item.src, //=> 視頻流地址
});
player.attachMediaElement(videoElement); //=> 綁DOM
player.load();
player.play();
} else {
this.$message.error('不支持flv格式視頻')
}
this.vloading = false;
})
},
},
};
</script>
<style lang="scss" scoped>
#video-container {
}
</style>5、hls.js
業(yè)務是完成了，后續(xù)我也看了一下m3u8視頻流的播放。
1.M3U8文件是指UTF-8編碼格式的M3U文件。M3U文件是記錄了一個索引純文本文件,打開它時播放軟件并不是播放 它,而是根據(jù)它的索引找到對應的音視頻文件的網(wǎng)絡地址進行在線播放。
2.HLS 與 M3U8 HLS(全稱:Http Live Streaming)是由Apple公司定義的用于實時流傳輸?shù)膮f(xié)議
3.vue項目可采用的hls.js插件+video標簽的形式。
原生video標簽播放不了，但是我們可以借助hls.js的幫助，實現(xiàn)這個功能。
cnpm i -s hls.js
過程也是比較簡單的，video標簽提供一個ref，可供綁定選擇元素就可以了，其他無所謂，hls.js會出手。
下面是源碼，挑著用就行了
<template>
<section>
<video class="full-height full-width" ref="video" controls></video>
</section>
</template>
<script>
let Hls = require('hls.js');
export default {
data() {
return {
hls: '',
src: 'm3u8視頻流地址'
};
},
mounted() {
this.getStream(src)
},
methods: {
videoPause() {
if (this.hls) {
this.$refs.video.pause();
this.hls.destroy();
this.hls = null;
}
},
getStream(source) {
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(source);
this.hls.attachMedia(this.$refs.video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log('加載成功');
this.$refs.video.play();
});
this.hls.on(Hls.Events.ERROR, (event, data) => {
// console.log(event, data);
// 監(jiān)聽出錯事件
console.log('加載失敗');
});
}
},
beforeDestroy() {
this.videoPause();
}
}
};
</script>6、rtmp流
基本上rtmp流都是需要flash環(huán)境才能播放了，目前市面上的插件可能有部分插件還支持，但是一般都是需要指定瀏覽器，兼容性極差。
也有一種方案是自行搭建服務器，服務器轉碼變成圖片，一幀一幀傳給網(wǎng)頁端，缺點是沒有聲音。
可能還有其他方案吧，暫時沒太深究就不得而知了，歡迎討論。
最后
到此這篇關于fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐的文章就介紹到這了,更多相關flv文件blob流實時播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本例是應用別人的例子，原來那位老兄是用一般方法寫成的無限級折疊菜單，通過了一些簡化修改，將原來的例子改成了面向對象的方式2013-07-07
數(shù)組想必大家對它并不陌生吧，有些新手朋友們都不知道如何移除數(shù)組元素，下面為大家介紹個示例，喜歡的朋友可以了解下2013-09-09
這篇文章主要介紹了驗證碼功能的三種實現(xiàn)方式,分為數(shù)字短信驗證碼，圖形驗證碼，滑動驗證碼，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
使用 jQuery(Ajax)/PHP/MySQL實現(xiàn)自動完成功我覺得我有必要寫這個教程，因為曾經(jīng)見到的大部分關于自動完成的應用程序都只是給你一個程序源碼包，然后告訴你怎么使用，而不是告訴你它是如何工作的以及為什么這樣做。2008-06-06
這篇文章主要介紹了JS實現(xiàn)給數(shù)組對象排序的方法,結合實例形式分析了javascript數(shù)組對象排序相關實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要幫助大家理解javascript中DOM事件，解決了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用，感興趣的小伙伴們可以參考一下2015-12-12
這是一個非常有趣的題目。我們先從Object.prototype.toString入手，看能否解決它。2010-02-02
本文主要介紹了原生js更改css樣式的兩種方式，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
對于面向對象的基礎語法在此我就不重復了，對面向對象不熟悉的朋友可以參看《使用面向對象的技術創(chuàng)建高級 Web 應用程序》一文。2010-10-10
今天看到一個很久的帖子說string連接優(yōu)化問題。于是自己也測試一下。寫了個很簡單的代碼2011-07-07