文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

fiv.js实现flv文件blob流实时播放的项目实践

2023-05-16 14:35

关注

一、前言

最近遇到个需求,有个监控视频需要在网页实时播放,后台提供了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实现的视频流播放插件都失效,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环境才能播放了,目前市面上的插件可能有部分插件还支持,但是一般都是需要指定浏览器,兼容性极差。

也有一种方案是自行搭建服务器,服务器转码变成图片,一帧一帧传给网页端,缺点是没有声音。

可能还有其他方案吧,暂时没太深究就不得而知了,欢迎讨论。

最后

到此这篇关于fiv.js实现flv文件blob流实时播放的项目实践的文章就介绍到这了,更多相关flv文件blob流实时播放内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯