Flv.js讲解

最新推荐文章于 2025-05-06 16:06:49 发布

Cultivate_love

最新推荐文章于 2025-05-06 16:06:49 发布

阅读量6.6k

点赞数 2

文章标签： vue.js flv http-flv

本文链接：https://blog.youkuaiyun.com/Cultivate_love/article/details/116532666

版权

本文介绍了Flv.js，一种基于浏览器的FLV播放技术。它利用原生Video标签实现高性能播放，支持高清、录播和直播，并且不再依赖Flash。然而，Flv.js存在音视频不同步、手机端兼容性差等问题，对于移动端，由于对Media Source Extensions的支持不足，大部分浏览器无法使用。在Vue.js中，可以通过示例代码集成Flv.js进行HTTP-FLV直播或录播播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flv讲解

Flv.js

常见的几种直播协议

HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器支持播放FLV。

WebSocket-FLV: 基于WebSocket传输FLV，依赖浏览器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket连接前还要先建立HTTP连接。

HLS: Http Live Streaming，苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放。

RTP: 基于UDP，延迟1秒，浏览器不支持。

在支持浏览器的协议里，延迟排序是：
RTMP = HTTP-FLV = WebSocket-FLV < HLS
而性能排序恰好相反：
RTMP > HTTP-FLV = WebSocket-FLV > HLS
也就是说延迟小的性能不好。

一、Flv.js是什么？

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash，使浏览器在不借助Flash的情况下播放FLV成为可能。 ![Flv对几种视频流支持情况](https://img-blog.csdnimg.cn/20210508161946781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0N1bHRpdmF0ZV9sb3Zl,size_16,color_FFFFFF,t_70)

二、Flv.js的优势

1.由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清

代码如下（示例）：

<div class="mainContainer">
    <video name="videoElement" class="centeredVideo" id="videoElement" autoplay></video>
    <div class="btnList">
      <div class="playbtn" @click="flvPLayOrPause()">
        <i v-if="pauseOrPlay" class="el-icon-video-play"></i>
        <i v-else class="el-icon-video-pause"></i>
      </div>
    </div>
  </div>

2.同时支持录播和直播

代码如下（示例）：

 flvInit() {
   
      let flvurl = this.configflv.flvurl
      let flvtype = this.configflv.flvtype
      let videoElement = document.getElementById("videoElement");
      let flvPlayer = flvjs.createPlayer(
        {
   
          type: flvtype,
          isLive

最低0.47元/天解锁文章