flv.js

2024-06-28 16:45:34 104
flv.js 是一个用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器,无需 Flash 支持。它通过将 FLV 文件流转码为 ISO BMFF (Fragmented MP4) 段,然后通过 Media Source Extensions API 将这些 MP4 段送入 HTML5 `<video>` 元素中进行播放。

特点

  • 兼容性:兼容 Chrome、Firefox、Safari 10、IE11 和 Edge。
  • 低延迟直播:支持 HTTP FLV 低延迟直播和 FLV over WebSocket 直播。
  • 多段视频播放:支持多段视频的播放。
  • 低开销:极低的系统开销,浏览器硬件加速。
  • 多种编解码器支持:支持 H.264 + AAC / MP3 编解码器。

使用场景

flv.js 适用于需要播放 FLV 视频格式的场景,特别是在不支持 Flash 的环境中,或需要低延迟直播流媒体播放的场景。

安装方式

可以使用 npm 进行安装:

npm install --save flv.js

使用示例

在 HTML 中引入 flv.js,并创建一个视频播放器:

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://example.com/flv/video.flv'
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
  }
</script>

常用 API 介绍

  • flvjs.isSupported():检查浏览器是否支持 flv.js。
  • flvjs.createPlayer(config):创建 FLV 播放器实例,config 包括视频类型和 URL 等参数。
  • flvPlayer.attachMediaElement(videoElement):将播放器实例绑定到 HTML5 <video> 元素。
  • flvPlayer.load():加载视频流。
  • flvPlayer.play():开始播放视频。
  • flvPlayer.pause():暂停播放视频。
  • flvPlayer.unload():卸载当前视频流并释放相关资源。

高级用法

  • Multipart Playback:提供一个播放列表给 MediaDataSource 来实现多段视频的播放。
  • Live Stream Playback:配置直播流播放,具体可以参考 livestream.md 文档。

官方资料

flv.js 是一个功能强大且高效的 FLV 播放器,适用于多种视频播放需求,特别是在低延迟直播和多段视频播放的场景中表现出色。更多信息可以访问其 GitHub 仓库官方文档