flv.js在vue中的使用

news2024/10/5 15:31:59

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

使用方法

<template>
  <div class="video" :style="{ height: voidHeight }">
    <video ref="videoElement"  muted controls autoplay controlslist="nodownload noplaybackrate noremoteplayback" disablePictureInPicture="true" v-if="!imgError"></video>
    <div class="img_error" v-if="imgError">
      <p>无法连接相关设备</p>
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  name: "assemblyFlv",
  props: ["url", "height", "destroy","playon"], // 视频流路径，播放器高度，是否销毁播放器
  data() {
    return {
      flvPlayer: "",
      imgError: false,
      voidHeight: "",
      playOn:true
    };
  },
  mounted() {
    // 判断是否传入高度，如果没有，高度100%
    this.height ? (this.voidHeight = this.height) : (this.voidHeight = "100%");
    // 页面加载完成后，初始化
    this.$nextTick(() => {
      this.init(this.url);
    });
  },
  methods: {
    // 初始化
    init(source) {
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            url: source,
            isLive: true,
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true, //自动清除缓存
          }
        );
        var videoElement = this.$refs.videoElement;
        this.flvPlayer.attachMediaElement(this.$refs.videoElement);
        if (this.url !== "" && this.url !== null) {
            this.flvPlayer.load();
            //this.flvPlayer.play();
            setTimeout(() => { this.flvPlayer.play(); }, 100);
            // 加载完成
            this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
              this.imgError = false;
            });

            // 加载失败
            this.flvPlayer.on(
              flvjs.Events.ERROR,
              () => {
                if (this.flvPlayer) {
                    this.reloadVideo(this.flvPlayer);
                }else{
                  this.imgError = true;
                }
              },
              (error) => {
                console.log(error);
              }
            );

            this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) =>{
                if(this.playon != false){
                   if (this.lastDecodedFrame == 0) {
                     this.lastDecodedFrame = res.decodedFrames;
                     console.log(this.lastDecodedFrame)
                     return;
                   }
                   if (this.lastDecodedFrame != res.decodedFrames) {
                     this.lastDecodedFrame = res.decodedFrames;
                   } else {
                       this.lastDecodedFrame = 0;
                       console.log('卡住重连')
                       if (this.flvPlayer) {
                         this.reloadVideo(this.flvPlayer);
                         console.log('卡住重连完成')
                     }
                   }
                  }
                 });

            videoElement.addEventListener("progress", () => {
              if(videoElement.buffered.length != 0){
                let end = videoElement.buffered.end(0); //获取当前buffered值(缓冲区末尾)
                let delta = end - videoElement.currentTime; //获取buffered与当前播放位置的差值

                // 延迟过大，通过跳帧的方式更新视频
                if (delta > 10 || delta < 0) {
                  this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0) - 1;
                  console.log('跳帧')
                  return;
                }
                // 追帧
                if (delta > 1) {
                  videoElement.playbackRate = 1.1;
                  console.log('追帧')
                } else {
                  videoElement.playbackRate = 1;
                  console.log('正常')
                }
              }
            });

            // 点击播放按钮后，更新视频
            videoElement.addEventListener("play", () => {
              if(videoElement.buffered.length > 0){
              let end = videoElement.buffered.end(0) - 1;
              this.flvPlayer.currentTime = end;
              console.log('播放最新')
              }
            });
            // 网页重新激活后，更新视频
            window.onfocus = () => {
              if(videoElement.buffered.length > 0){
                let end1 = videoElement.buffered.end(0) - 1;
                this.flvPlayer.currentTime = end1;
                console.log('页面切换')
              }
            };




        }

      } else {
        this.imgError = true;
      }
    },
    //断线重连
    reloadVideo(flvPlayer) {
          this.detachMediaElement();
          this.init(this.url);
          console.log('断线重连')
    },
    // 销毁
    detachMediaElement() {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = "";
    },
  },
  watch: {
    url() {
      this.imgError = false;
      // 切换流之前，判断之前的流是否销毁
      this.flvPlayer == "" ? "" : this.detachMediaElement();
      // 初始化
      this.init(this.url);
    },
    destroy() {
      // 传入开关值
      if (this.destroy) {
        this.init(this.url);
      } else {
        this.flvPlayer == "" ? "" : this.detachMediaElement();
      }
    },
    playon() {
      this.reloadVideo(this.flvPlayer);
    }
  },
  beforeDestroy() {
    this.detachMediaElement();
  },
};
</script>

<style scoped>
.video {
  position: relative;
  height: 100%;
}
.video video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.video video::-webkit-media-controls-play-button{
  display: none;
}
.video video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}
.video video::-webkit-media-controls-timeline {
    display: none;
}
.video video::-webkit-media-controls-current-time-display {
    display: none;
}
.video video::-webkit-media-controls-time-remaining-display {
    display: none;
}
.img_error {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -120px;
  text-align: center;
}
.img_error > img {
  margin-bottom: 1em;
}
.img_error > p {
  color: #00fdff;
  font-weight: bold;
  font-size: 1.2em;
}
</style>

封装：

 子组件封装：

<template>
    <div class="video-container">
      <video ref="videoElement" class="centeredVideo" controls autoplay muted></video>  
    </div>
</template>
 
<script>
import flvjs from "flv.js";  //引入flv
export default {
  props: {
    url : String,
  },
  data() {
    return {
      // src: ["http://172.21.1.111/live?port=1935&app=myapp&stream=streamname"],
    };
  },
  mounted() {
    this.flv_load(this.url);
  },
  methods: {
    flv_load(url) {
      if (flvjs.isSupported()) {
      let videoElement = this.$refs.videoElement;
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv", //媒体类型
            url: url, //flv格式媒体URL
            isLive: true, //数据源是否为直播流
            hasAudio: false, //数据源是否包含有音频
            hasVideo: true, //数据源是否包含有视频
            enableStashBuffer: false, //是否启用缓存区
          },
          {
            enableWorker: false, // 是否启用分离的线程进行转换
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            autoCleanupSourceBuffer: true, //自动清除缓存
          }
        );
        this.flvPlayer.attachMediaElement(videoElement); //将播放实例注册到节点
        this.flvPlayer.load(); //加载数据流
        this.flvPlayer.play(); //播放数据流
      }
    },
  },
};
</script>
 
<style scoped>
/* .video-container {
  display: inline-block;
  margin-right: 10px;
  width: 32%;
  height: 45%;
} */
.centeredVideo {
  width: 100%;
}
</style>

父组件调用：

<template>
  <el-card class="box-card">
    <div class="flvbox" v-for="(item,index) in src" :key="index">
    <!-- <VideoFlv url="http://172.21.1.111/live?port=1935&app=myapp&stream=streamname" /> -->
    <VideoFlv :url="item" />
    </div>
  </el-card>
</template>
 
<script>
import VideoFlv from "./VideoFlv.vue";
export default {
  components:{
    VideoFlv
  },
  data() {
    return {
      src: [
        "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
        "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
        "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
        "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
        "http://172.21.1.111/live?port=1935&app=myapp&stream=streamname",
        "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
      ],
    };
  },
};
</script>
 
<style scoped>
.flvbox {
  display: inline-block;
  margin-right: 10px;
  width: 32%;
}
</style>

因为视频需要实时的 后边发现上边写法暂停之后和切换页面之后 会有延迟 所以开发让新加个刷新按钮 也已满足  然后这个api的写法我尝试很多 追帧啊 更新视频啊 都没生效  父组件重新传值 因为值没有变化 所以也没有重新渲染  所以用到了key 属性 vue每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。所以我用了一个时间戳方法

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1209292.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue3中的 ref() 为何需要 .value ?

Vue3中的 ref() 为何需要 .value ?

前言 本文是 Vue3 源码实战专栏的第 7 篇&#xff0c;从 0-1 实现 ref 功能函数。 官方文档 中对ref的定义&#xff0c; 接受一个内部值&#xff0c;返回一个响应式的、可更改的 ref 对象&#xff0c;此对象只有一个指向其内部值的属性 .value。 老规矩还是从单测入手&…
阅读更多...
viple模拟器使用（一）：线控模拟

viple模拟器使用（一）：线控模拟

(1)unity模拟器 通过viple程序&#xff0c;将viple编写逻辑运行在unity模拟器中。 首先编写viple程序&#xff0c;逻辑&#xff1a;设置一个机器人主机&#xff0c;并且&#xff0c;按↑、↓、←、→方向键的时候&#xff0c;能分别控制模拟机器人在unity模拟器中运行。 主机…
阅读更多...
《视觉SLAM十四讲》-- 后端 1（上）

《视觉SLAM十四讲》-- 后端 1（上）

文章目录 08 后端 18.1 概述8.1.1 状态估计的概率解释8.1.2 线性系统和卡尔曼滤波&#xff08;KF&#xff09;8.1.3 非线性系统和扩展卡尔曼滤波&#xff08;EKF&#xff09;8.1.4 小结 08 后端 1 前端视觉里程计可以给出一个短时间内的轨迹和地图&#xff0c;但由于不可避免的…
阅读更多...
基于 vue3源码 尝试 mini-vue 的实现

基于 vue3源码 尝试 mini-vue 的实现

基于 vue3源码 尝试 mini-vue 的实现 预览&#xff1a; 1. 实现思路 渲染系统模块响应式系统mini-vue 程序入口 2. 渲染系统模块 2.1 初识 h 函数 以下是 vue 的模版语法代码&#xff1a; <template><div classcontainer>hello mini-vue</div> </…
阅读更多...
【STM32】FreeModbus 移植Modbus-RTU从机协议到STM32详细过程

【STM32】FreeModbus 移植Modbus-RTU从机协议到STM32详细过程

背景 FreeModbus是一款开源的Modbus协议栈&#xff0c;但是只有从机开源&#xff0c;主机源码是需要收费的。 第一步&#xff1a;下载源码 打开.embedded-experts的官网&#xff0c;连接如下&#xff1a; https://www.embedded-experts.at/en/freemodbus-downloads/ 其中给出…
阅读更多...
【PTQ】Cross-Layer Equalization跨层均衡-证明和实践详细解读

【PTQ】Cross-Layer Equalization跨层均衡-证明和实践详细解读

Cross-Layer Equalization跨层均衡 aimet解读 符合规则的模型结构 统一要求&#xff1a;单数据流&#xff0c;中间激活不流向其他地方概念说明&#xff1a; Conv: gruoups1的普通卷积&#xff0c;包括TransposedConv和ConvDepthwiseConv: 深度可分离卷积&#xff0c;groupsi…
阅读更多...
Adobe家里的“3D“建模工 | Dimension

Adobe家里的“3D“建模工 | Dimension

今天&#xff0c;我们来谈谈一款在Adobe系列中比肩C4D的高级3D软件的存在—— Dimension。 Adobe Dimension &#xff0c;其定位是一款与Photoshop以及Illustrator相搭配的3D绘图软件。 Adobe Dimensions与一般的3D绘图软件相较之下&#xff0c;在操作界面在功能上有点不大相同…
阅读更多...
第四天课程 分布式搜索引擎1

第四天课程 分布式搜索引擎1

分布式搜索引擎01 – elasticsearch基础 0.学习目标 1.初识elasticsearch 1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; …
阅读更多...
常见排序算法实现

常见排序算法实现

&#x1f495;"每一天都是值得被热爱的"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;常见排序算法实现 1.排序的概念 所谓排序&#xff0c;就是按照特定顺序重新排列序列的操作 排序的稳定性&#xff1a; 当一个序列中存在相同的元素时 排序过…
阅读更多...
Swift制作打包framework

Swift制作打包framework

新建framework项目 设置生成fat包&#xff0c;包括模拟器x86_64和arm64 Buliding Settings -> Architectures -> Build Active Architecture Only 设置为NO 设置打包环境&#xff0c;选择release edit Scheme -> run -> Build configuration 设置为 Release 设置…
阅读更多...
专题解读｜Graph Fairness代表性工作介绍

专题解读｜Graph Fairness代表性工作介绍

1. 图上的公平性问题 图在现实世界中无处不在&#xff0c;例如知识图谱&#xff0c;社交网络和生物网络。近年来&#xff0c;图神经网络( graph neural networks&#xff0c;GNNs ) 在图结构数据建模方面表现出了强大的能力。一般地&#xff0c;GNNs采用消息传递机制&#xff…
阅读更多...
什么是应用集成？应用集成快速指南

什么是应用集成？应用集成快速指南

什么是应用集成&#xff1f; 想象一下&#xff0c;在剧院观看音乐剧&#xff0c;没有人站在正确的地方&#xff0c;每个人都在互相交谈&#xff0c;或者有漫长而尴尬的沉默&#xff0c;管弦乐队的音乐家们在错误的时刻演奏&#xff0c;完全是混乱的&#xff0c;就会很难看。 业…
阅读更多...
房产中介租房小程序系统开发搭建：详细指南教你如何构建

房产中介租房小程序系统开发搭建：详细指南教你如何构建

随着微信小程序的日益普及&#xff0c;越来越多的企业和个人开始尝试开发自己的小程序。以下是制作一个房地产微信小程序的详细教程&#xff0c;希望对大家有所帮助。 一、注册登录乔拓云平台&#xff0c;进入后台 首先&#xff0c;需要注册并登录乔拓云平台&#xff0c;该平台…
阅读更多...
Centos上删除文件及目录的命令积累

Centos上删除文件及目录的命令积累

01-如果我想删除Centos上当前目录下的文件 test06-2023-11-14-01.sql 该怎么操作&#xff1f; 答&#xff1a;如果你想删除CentOS上当前目录下的文件 test06-2023-11-14-01.sql&#xff0c;可以使用 rm 命令。以下是删除文件的基本语法&#xff1a; rm test06-2023-11-14-01.s…
阅读更多...
sql查询查看数据库空间使用情况

sql查询查看数据库空间使用情况

SELECT UPPER(F.TABLESPACE_NAME) "表空间名", D.TOT_GROOTTE_MB "表空间大小(M)", D.TOT_GROOTTE_MB - F.TOTAL_BYTES "已使用空间(M)", TO_CHAR(ROUND((D.TOT_GROOTTE_MB - F.TOTAL_BYTES) / D.TOT_GROOTTE_MB * 100,2),990.99) || % "使…
阅读更多...
Nexus的Maven私有仓库搭建

Nexus的Maven私有仓库搭建

Nexus的maven私有仓库搭建 一、了解 maven仓库设置 默认设置 其中&#xff1a; maven-central: 预定义的代理Maven Central仓库&#xff0c;它包含了大量的开源Java依赖包。maven-public: 存储库是一个组合存储库&#xff0c;它包含了maven-releases和maven-snapshots存储库…
阅读更多...
【机器学习基础】机器学习的模型评估（评估方法及性能度量原理及主要公式）

【机器学习基础】机器学习的模型评估（评估方法及性能度量原理及主要公式）

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;后面的内容会越来越有意思~ &#x1f4a1;往期推荐&#xff1a; 【机器学习基础】机器学习入门&#xff08;1&#xff09; 【机器学习基…
阅读更多...
CM211-1 MC022主板输入刷Armbian

CM211-1 MC022主板输入刷Armbian

咋一看以为是NAND的存储&#xff0c;经过各方搜索&#xff0c;发现BWCMMQ511G08G存储芯片是狭义的NAND&#xff0c;支持emmc协议&#xff0c;故而做尝试。 烧写步骤 1.下载Armbian镜像 Armbian_23.11.0_amlogic_s905l3-cm211_lunar_6.1.60_server_2023.11.01.img.gz 2.将镜像…
阅读更多...
Leetcode—4.寻找两个正序数组的中位数【困难】

Leetcode—4.寻找两个正序数组的中位数【困难】

2023每日刷题&#xff08;二十九&#xff09; Leetcode—4.寻找两个正序数组的中位数 直接法实现代码 int mid, mid1, mid2; bool findmid(int n, int k, int x) {if(n % 2 1) {if(k n / 2) {mid x;return true;}} else {if(k n / 2 - 1) {mid1 x;} else if(k n / 2) {…
阅读更多...
程序员，你的护城河挖好了吗？

程序员，你的护城河挖好了吗？

程序员的护城河 在遥远的古代&#xff0c;护城河是一种防御工事&#xff0c;通常用于保护城市或城堡免受外部攻击。它是由人工挖掘或天然形成的河流、壕沟或城墙等&#xff0c;可以作为防御屏障&#xff0c;阻止敌人的进入。 而对于程序员而言&#xff0c;“护城河”是一种比喻…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023