36 | 如何使用 flv.js 播放 FLV 多媒体文件呢？
李超
该思维导图由 AI 生成，仅供参考
flv.js 是由 bilibili 公司开源的项目。它可以解析 FLV 文件，从中取出音视频数据并转成 BMFF 片段（一种 MP4 格式），然后交给 HTML5 的<video>标签进行播放。通过这种方式，使得浏览器在不借助 Flash 的情况下也可以播放 FLV 文件了。
目前，各大浏览器厂商默认都是禁止使用 Flash 插件的。之前常见的 Flash 直播方案，到现在已经遇到极大的挑战。因为它需要用户在浏览器上主动开启 Flash 选项之后才可以正常使用，这种用户体验是非常糟糕的，而 flv.js 的出现则彻底解决了这个问题。
flv.js 是由 JavaScript 语言开发的，该播放器的最大优势是，即使不安装 Flash 插件也可以在浏览器上播放 FLV 文件。虽说 Adobe 公司早已不再为 Flash 提供支持了，但 FLV 多媒体文件格式不会就此而消亡。因此，在没有 Flash 的时代里，能实现在浏览器上播放 FLV 文件就是 flv.js 项目的最大意义。
flv.js 基本工作原理
flv.js 的工作原理非常简单，它首先将 FLV 文件转成 ISO BMFF（MP4 片段）片段，然后通过浏览器的 Media Source Extensions 将 MP4 片段播放出来。具体的处理过程如下图所示：
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
flv.js 是一款由 bilibili 公司开源的项目，旨在解决浏览器播放 FLV 文件的问题。该项目通过将 FLV 文件转换成 MP4 格式，使得浏览器可以在不依赖 Flash 的情况下播放 FLV 文件，填补了浏览器播放 FLV 文件的空白，为用户提供了更好的体验。文章介绍了 flv.js 的基本工作原理，包括从云端获取 FLV 数据、数据加载和解封装等步骤。此外，还介绍了 `<video>` 标签的属性和使用 flv.js 的步骤，包括下载源码、构建和使用示例。flv.js 的使用相对简单，只需按照文中的步骤即可快速创建利用 flv.js 播放 FLV 文件的 Demo。文章还提到了对 flv.js 的测试需要使用流媒体服务器，以及搭建流媒体服务器和推流工具的相关内容。总体来说，flv.js 是一个优秀的 Web 开源播放器，代码写得漂亮且可读性高，但文档相对匮乏，因此在开发过程中遇到问题建议直接查看源码。通过本文的介绍，读者可以了解到如何使用 flv.js 播放 FLV 文件，以及构建自己的直播系统所需的相关知识。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《从 0 打造音视频直播系统》，新⼈⾸单¥59
《从 0 打造音视频直播系统》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
神经旷野舞者感觉软件世界就是数据，抽象和算法，一马平川，其他各种障碍只有各种公司或者软件提供的糟糕接口，以及缺少人去填补这些接口衔接。作者回复: 在公司里大部分的 BUG 都是与业务和研发工程师的水平有关的
2019-12-1823
Random老师你好，我现在渲染视频的方案，是把原生端收到的视频流用YUV的格式渲染在canvas上的，性能不是特别好，有什么好的方式直接把视频流用video标签播放吗？一个electron 应用作者回复: webGL
2020-06-1522
QD账号老师，请问一下在浏览器直接播放rtmp流，需要开启flash，现在想到有一个方式是拉hls，或者还有什么方式可以解决这个问题吗？作者回复: http-flv或都hls，后面随着各大CDN厂商都支持 webrtc之后，大多数人都会使用webrtc,不过现在商品还不成熟
2020-04-17
为城老师，WebRTC如何推流至直播服务器没有篇幅介绍，能提供多一些这方面内容的介绍吗？作者回复: 这方面没有介绍，你可以在PC端的 WebRTC客户端增加 RTMP 推流功能，直接向 CDN 推流就可以了。或者在服务端将 RTP 流转 RTMP 流进行推流
2019-10-07- Geek_0b5414老师，请问一下有没有支持H265格式的流氏播放2022-04-281
收起评论
