快捷導(dǎo)航

fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐

更新時(shí)間：2023年04月18日 09:14:00 作者：地霊殿__三無

本文主要介紹了fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、前言

最近遇到個(gè)需求，有個(gè)監(jiān)控視頻需要在網(wǎng)頁實(shí)時(shí)播放，后臺(tái)提供了flv流、m3u8流和rtmp流。

我一聽，這不是小事一樁，前兩年才做過的需求，就隨口應(yīng)了下來。

二、過程

1、開端

說到實(shí)時(shí)播放，一般都是想到rtmp流，隨便一搜帖子（忘記看帖子時(shí)間了），就能看到以下兩個(gè)插件。

cnpm install video-js -S
cnpm install videojs-flash -S

跟我印象中之前用的一模一樣。

簡(jiǎn)單瀏覽了下帖子的使用過程，我就打算動(dòng)手敲了。

2、出師不利

video-js還是能正常下載的，但到了video-js-flash就一直下載失敗了。

這時(shí)我突然想起2020年12月，谷歌就不再支持flash插件了，這導(dǎo)致許多基于flash實(shí)現(xiàn)的視頻流播放插件都失效，vue-video-player和vue-flash首當(dāng)其沖。

3、峰回路轉(zhuǎn)--參考舊項(xiàng)目

由于項(xiàng)目后臺(tái)給我們提供了三種視頻流，所以我們的選擇也比較多。

同時(shí)因?yàn)槭莏sp舊項(xiàng)目改造成vue項(xiàng)目，我就想看看之前用的是什么插件，原來是flv.js。

這不就是小破站用的技術(shù)嗎，純js開發(fā)，沒用到flash，這兼容性肯定更好吧。

4、flv.js

確定了所用插件，接下來的步驟就比較簡(jiǎn)單了，無非就是下載，引入，看例子寫法照著抄就可以了。

cnpm i flv.js

下面提供一下demo，demo里是多個(gè)flv流多窗口播放的方式，如果只有一個(gè)flv需求播放，就簡(jiǎn)化一下就可以了，其他大家隨便看看吧。

<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è)務(wù)是完成了，后續(xù)我也看了一下m3u8視頻流的播放。

1.M3U8文件是指UTF-8編碼格式的M3U文件。M3U文件是記錄了一個(gè)索引純文本文件,打開它時(shí)播放軟件并不是播放它,而是根據(jù)它的索引找到對(duì)應(yīng)的音視頻文件的網(wǎng)絡(luò)地址進(jìn)行在線播放。
2.HLS 與 M3U8 HLS(全稱:Http Live Streaming)是由Apple公司定義的用于實(shí)時(shí)流傳輸?shù)膮f(xié)議
3.vue項(xiàng)目可采用的hls.js插件+video標(biāo)簽的形式。

原生video標(biāo)簽播放不了，但是我們可以借助hls.js的幫助，實(shí)現(xiàn)這個(gè)功能。

cnpm i -s hls.js

過程也是比較簡(jiǎn)單的，video標(biāo)簽提供一個(gè)ref，可供綁定選擇元素就可以了，其他無所謂，hls.js會(huì)出手。

下面是源碼，挑著用就行了

 <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)聽出錯(cuò)事件
            console.log('加載失敗');
          });
        }
      },
      beforeDestroy() {
        this.videoPause();
      }
    }
  };
</script>

6、rtmp流

基本上rtmp流都是需要flash環(huán)境才能播放了，目前市面上的插件可能有部分插件還支持，但是一般都是需要指定瀏覽器，兼容性極差。

也有一種方案是自行搭建服務(wù)器，服務(wù)器轉(zhuǎn)碼變成圖片，一幀一幀傳給網(wǎng)頁端，缺點(diǎn)是沒有聲音。

可能還有其他方案吧，暫時(shí)沒太深究就不得而知了，歡迎討論。

最后

到此這篇關(guān)于fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)flv文件blob流實(shí)時(shí)播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: