flv.js 使用说明

关键点

• 研究表明，flv.js 是一个开源 JavaScript 库，用于在 HTML5 浏览器中播放 FLV 视频，支持直播和录播。
• 证据倾向于认为，使用 flv.js 需要引入库文件、创建视频元素并通过 JavaScript 配置播放器，但性能可能受浏览器兼容性和网络条件影响。
• 存在争议的是 flv.js 是否适合所有场景，部分观点认为对于移动端（如 iPhone Safari）可能需要其他方案如 HLS。

---

flv.js 使用说明

什么是 flv.js？

flv.js 是一个开源的 JavaScript 库，允许你在 HTML5 浏览器中播放 FLV 格式的视频。它由 Bilibili 开发，核心功能是将 FLV 视频流转码为 MP4 碎片格式，然后通过 Media Source Extensions (MSE) API 喂给浏览器的视频标签，从而实现播放。研究表明，它特别适合直播和录播场景，支持 H.264 + AAC 编解码器，兼容 Chrome、FireFox、Safari 10、IE11 和 Edge 等浏览器。

如何使用 flv.js？

以下是简单步骤，帮助你快速上手：

1. 引入 flv.js

• 你可以从 GitHub 仓库 下载 flv.js，或通过 CDN 引入，例如：

  <script src="[invalid url, do not cite]

• 如果需要自定义构建，需安装 Node.js 和 npm，运行 npm install 和 gulp release 生成 flv.min.js 文件。

2. 创建视频元素

• 在 HTML 中添加一个 <video> 标签，例如：

  <video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
    <source src=""></source>
  </video>

• 注意：视频文件必须托管在服务器上，不能直接从本地文件系统播放。

3. 配置和播放

• 在 JavaScript 中，使用 flvjs.createPlayer() 创建播放器实例，传入 FLV 文件 URL 和配置选项：

  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://example.com/your-flv-file.flv',
    isLive: true, // 是否为直播
    hasAudio: true,
    hasVideo: true,
    enableStashBuffer: false,
    enableWorker: false,
    autoCleanupSourceBuffer: true
  });

• 将播放器附加到视频元素：

  flvPlayer.attachMediaElement(document.getElementById('my-player'));

• 加载并播放：

  flvPlayer.load();
  flvPlayer.play();

4. 常用操作

• 暂停：flvPlayer.pause()
• 停止：按顺序调用 pause()、unload()、detachMediaElement()、destroy()。
• 检查支持：先用 flvjs.isSupported() 检查浏览器是否支持 flv.js。

注意事项

• 确保浏览器支持 Media Source Extensions (MSE)，iPhone 的 Safari 不支持，因此可能需要备用方案如 HLS。
• 网络条件会影响播放流畅度，建议优化服务器端 FLV 流传输。

---

flv.js 使用说明详解

背景与定义

flv.js 是一个开源的 JavaScript 库，专为在 HTML5 浏览器中播放 FLV 格式视频设计。它由 Bilibili 开发，于 2016 年开源，旨在解决 Flash 逐渐被淘汰后 FLV 视频播放的问题。flv.js 的工作原理是将 FLV 文件流转码为 ISO BMFF（MP4 碎片）格式，然后通过 Media Source Extensions (MSE) API 将这些碎片喂给浏览器的 <video> 标签，从而实现播放。研究表明，它特别适合直播和录播场景，支持 H.264 + AAC 编解码器，兼容多种主流浏览器，包括 Chrome、FireFox、Safari 10、IE11 和 Edge。

根据可靠的中文在线资源，如 简书、CSDN 博客和 脚本之家，flv.js 是纯原生 JavaScript 开发，不依赖 Flash，使用 ECMAScript 6 编写，通过 Babel Compiler 编译为 ECMAScript 5，并使用 Browserify 打包。其目标是提供低延迟、高性能的 FLV 播放方案，尤其在直播领域表现优异。

flv.js 的核心功能与特点

flv.js 具有以下主要功能和特点：

• FLV 容器支持：可以播放带有 H.264 视频编码和 AAC 或 MP3 音频编码的 FLV 文件。
• 多部分分段视频播放：支持分段视频的流式播放，适合长视频或直播场景。
• HTTP FLV 低延迟实时流播放：通过 HTTP 流式 IO 传输 FLV 数据，支持低延迟直播。
• FLV 通过 WebSocket 实时流播放：支持 WebSocket 协议传输 FLV 流，适合实时性要求高的场景。
• 浏览器兼容性：理论上支持所有支持 MSE 和 ECMAScript 5 的浏览器，实际兼容 Chrome、FireFox、Safari 10、IE11 和 Edge。需要注意的是，iPhone 版的 Safari 不支持 MSE，因此在移动端可能需要备用方案如 HLS。
• 低开销：通过浏览器的硬件加速，性能优异，支持高清视频播放。

使用 flv.js 的步骤

以下是详细的使用步骤，基于 简书和 脚本之家提供的教程：

1. 准备环境

• 安装 Node.js 和 npm：如果需要从源码构建 flv.js，需先安装 Node.js 和 npm。安装详情可参考相关文章，如 简书中的提示。
• 获取 flv.js：可以从 GitHub 仓库 克隆代码，或下载 zip 文件。
• 构建 flv.js（可选）：
• 打开命令行，进入 flv.js 代码目录（例如 D:\code\flv.js-master）。
• 运行 npm install 安装开发环境，会生成 node_modules 文件夹。
• 运行 npm install -g gulp 全局安装 Gulp。
• 运行 gulp release 生成 flv.js 和 flv.min.js 文件，位于 dist 文件夹中。

2. 在 HTML 中引入 flv.js

• 通过 CDN 引入：可以使用 CDN 服务，如 BootCDN，提供 flv.min.js 文件。例如：

  <script src="[invalid url, do not cite]

• 本地引入：将生成的 flv.min.js 文件复制到项目目录，引入即可。例如：

  <script src="./flv.min.js"></script>

3. 创建视频元素

• 在 HTML 中添加一个 <video> 标签，用于播放 FLV 视频。示例：

  <video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
    <source src=""></source>
  </video>

• 注意：type="rtmp/flv" 是推荐的类型，preload="auto" 和 muted autoplay 可根据需求调整。
• 重要提示：视频文件必须托管在服务器上，不能直接从本地文件系统播放，否则会因浏览器安全限制（如 CORS）而失败。

4. 在 JavaScript 中配置和播放

• 创建播放器实例：使用 flvjs.createPlayer() 创建播放器实例，传入媒体数据源和配置选项。示例：

  var flvPlayer = flvjs.createPlayer({
    type: 'flv', // 必须为 'flv'
    url: 'http://example.com/your-flv-file.flv', // FLV 文件 URL
    isLive: true, // 是否为直播流，直播设为 true，点播设为 false
    hasAudio: true, // 是否包含音频
    hasVideo: true, // 是否包含视频
    enableStashBuffer: false, // 是否启用缓冲区，直播通常设为 false
    enableWorker: false, // 是否启用 Web Worker，设为 false 以减少开销
    autoCleanupSourceBuffer: true // 是否自动清理源缓冲区，建议设为 true
  });

• 附加到视频元素：使用 attachMediaElement() 将播放器绑定到 <video> 元素：

  flvPlayer.attachMediaElement(document.getElementById('my-player'));

• 加载和播放：调用 load() 加载数据流，然后调用 play() 开始播放：

  flvPlayer.load();
  flvPlayer.play();

5. 常用方法与操作

flv.js 提供了一系列方法，用于控制视频播放，基于 脚本之家提供的教程，常见方法包括：

• flvjs.isSupported()：检查浏览器是否支持 flv.js，返回布尔值。
• flvjs.createPlayer(mediaDataSource, config)：创建播放器实例，mediaDataSource 为媒体数据源，config 为配置选项。
• attachMediaElement(mediaElement)：将播放器实例注册到 <video> 节点。
• load()：加载视频数据流。
• play()：开始播放视频。
• pause()：暂停播放。
• unload()：取消加载视频数据流。
• detachMediaElement()：从 <video> 元素中分离播放器。
• destroy()：销毁播放器实例，释放资源。

关闭视频流：当需要停止播放时，按以下顺序调用方法：

• pause()：暂停播放。
• unload()：取消加载数据流。
• detachMediaElement()：从视频元素中分离播放器。
• destroy()：销毁播放器实例。

6. 配置选项详解

配置选项可以根据需求调整，以下是常见选项及其作用：

• type：必须为 ‘flv’，指定播放类型。
• url：FLV 文件的 URL，必须托管在服务器上。
• isLive：布尔值，true 表示直播流，false 表示点播流。直播流通常延迟较低，但需要稳定的网络。
• hasAudio：布尔值，是否包含音频，设为 false 可减少带宽使用。
• hasVideo：布尔值，是否包含视频，通常设为 true。
• enableStashBuffer：布尔值，是否启用缓冲区，直播通常设为 false 以减少延迟。
• enableWorker：布尔值，是否启用 Web Worker，设为 false 可减少资源开销。
• autoCleanupSourceBuffer：布尔值，是否自动清理源缓冲区，建议设为 true 以避免内存泄漏。

以下表格总结了常见配置选项及其作用：

配置选项	类型	描述	推荐值（直播）
type	字符串	必须为 ‘flv’	‘flv’
url	字符串	FLV 文件 URL，必须托管在服务器上	–
isLive	布尔值	是否为直播流	true
hasAudio	布尔值	是否包含音频	true
hasVideo	布尔值	是否包含视频	true
enableStashBuffer	布尔值	是否启用缓冲区	false
enableWorker	布尔值	是否启用 Web Worker	false
autoCleanupSourceBuffer	布尔值	是否自动清理源缓冲区	true

7. 注意事项与优化

• 浏览器兼容性：flv.js 依赖 MSE，因此需要确保目标浏览器支持 MSE。研究表明，iPhone 版的 Safari 不支持 MSE，因此在移动端可能需要备用方案如 HLS。PC 版和 Android 版的浏览器大多支持 MSE，可利用 HTTP-FLV 实现低延迟直播。
• 网络条件：直播场景下，网络带宽和稳定性对播放流畅度影响较大，建议优化服务器端 FLV 流传输。
• 性能优化：直播通常禁用 enableStashBuffer 和 enableWorker，减少延迟和资源占用。
• 错误处理：建议在调用 flvjs.isSupported() 前检查浏览器支持性，若不支持，可提示用户或切换到其他播放方案。

8. 实际应用场景

flv.js 广泛用于直播和录播场景，例如：

• 直播：通过 HTTP-FLV 或 WebSocket-FLV 协议传输 FLV 流，支持低延迟实时播放，适合在线教育、游戏直播等。
• 录播：播放分段 FLV 文件，适合视频点播平台。
• 兼容性要求高：对于需要全平台支持的场景，可结合 HLS 作为备用方案。

9. 用户反馈与社区动态

从 CSDN 博客和 博客园 的评论可以看到，用户对 flv.js 的使用需求较高。例如，近期评论中“Monkhhy”（26天前）称赞 flv.js 教程浅显易懂，适合初学者；“hz1538”（11个月前）询问相关工具推荐，反映用户对实践需求的关注。社区讨论还包括直播优化方案，如追帧、断流重连和实时更新，显示 flv.js 在直播领域的广泛应用。

10. 参考资源

以下是获取更多 flv.js 相关信息的可靠资源：

• flv.js GitHub 仓库
• flv.js 使用说明 – 简书
• flv.js 具体使用教程 – 脚本之家
• 示例：使用 Flv.js 和 Reflv 播放视频 – 腾讯云开发者社区
• flv.js 的追帧、断流重连及实时更新的直播优化方案 – 博客园

11. 总结

flv.js 是一个强大的工具，用于在 HTML5 浏览器中播放 FLV 视频，尤其适合直播和录播场景。通过以上步骤，你可以轻松将 flv.js 集成到你的项目中，并实现 FLV 视频的播放。注意确保视频文件托管在服务器上，并根据浏览器兼容性和网络条件优化方案。希望本文的介绍能为用户提供清晰的入门指引，更多细节可参考上述资源深入学习。