«

fiv.js怎么实现flv文件blob流实时播放

时间:2024-6-14 09:34     作者:韩俊     分类: Javascript


本文小编为大家详细介绍“fiv.js怎么实现flv文件blob流实时播放”,内容详细,步骤清晰,细节处理妥当,希望这篇“fiv.js怎么实现flv文件blob流实时播放”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    过程

    1、开端

    说到实时播放,一般都是想到rtmp流,随便一搜帖子(忘记看帖子时间了),就能看到以下两个插件。

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

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

    简单浏览了下帖子的使用过程,我就打算动手敲了。

    2、出师不利

    video-js还是能正常下载的,但到了video-js-flash就一直下载失败了。

    这时我突然想起2020年12月,谷歌就不再支持flash插件了,这导致许多基于flash实现的视频流播放插件都失效,vue-video-player和vue-flash首当其冲。

    3、峰回路转--参考旧项目

    由于项目后台给我们提供了三种视频流,所以我们的选择也比较多。

    同时因为是jsp旧项目改造成vue项目,我就想看看之前用的是什么插件,原来是flv.js。

    这不就是小破站用的技术吗,纯js开发,没用到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

    业务是完成了,后续我也看了一下m3u8视频流的播放。

    1.M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放 它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
    2.HLS 与 M3U8 HLS(全称:Http Live Streaming)是由Apple公司定义的用于实时流传输的协议
    3.vue项目可采用的hls.js插件+video标签的形式。

    原生video标签播放不了,但是我们可以借助hls.js的帮助,实现这个功能。

    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);
                // 监听出错事件
                console.log('加载失败');
              });
            }
          },
          beforeDestroy() {
            this.videoPause();
          }
        }
      };
    </script>

    6、rtmp流

    基本上rtmp流都是需要flash环境才能播放了,目前市面上的插件可能有部分插件还支持,但是一般都是需要指定浏览器,兼容性极差。也有一种方案是自行搭建服务器,服务器转码变成图片,一帧一帧传给网页端,缺点是没有声音。

    标签: javascript

    热门推荐