MP4 与Fragmented MP4 (fMP4)的区别

区别

类别 MP4 FMP4(Fragmented MP4)
存储结构 视频文件整体存储为一个连续文件,moov 元数据通常在文件末尾 视频分成多个片段,每个片段包含独立的元数据(分片)
播放需求 必须先下载 moov 元数据后才能播放 可边下载边播放,适合流媒体播放
适用场景 适合本地播放或完整文件下载后播放 流媒体播放,例如 DASH、HLS 或通过 MediaSource API 进行播放
文件扩展名 .mp4 .mp4(文件扩展名相同,但内部结构不同)
实时性 需要等待整个文件可用才能开始播放 可实时播放,支持按需分段加载
服务器支持 可用普通文件服务器提供 需要支持流媒体的分段传输,例如支持 DASH 或 HLS 的 .m4s 分片

快速将 MP4 转换为 fMP4的前端库

MP4Box.js-允许操作和分片 MP4 文件

  1. 支持解析和操作 MP4 文件。
  2. 可以将普通 MP4 转换为 fMP4。
  3. 支持按需加载视频片段。

GitHub - gpac/mp4box.js: JavaScript version of GPAC's MP4Box tool

javascript 复制代码
<video controls></video>
<script src="mp4box.all.js"></script>
<script>
  var video = document.querySelector('video');
  var mediaSource = new MediaSource();

  video.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', function () {
    var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

    // 加载普通 MP4 并使用 MP4Box.js 转换为 fMP4
    fetch('video.mp4')
      .then((response) => response.arrayBuffer())
      .then((buffer) => {
        var mp4box = MP4Box.createFile();
        mp4box.onReady = function (info) {
          console.log('MP4 文件信息:', info);
        };

        buffer.fileStart = 0;
        mp4box.appendBuffer(buffer);
        var fMP4Buffer = mp4box.flush(); // 转换为 fMP4 格式

        sourceBuffer.addEventListener('updateend', () => {
          mediaSource.endOfStream();
          video.play();
        });

        sourceBuffer.appendBuffer(fMP4Buffer);
      });
  });
</script>

hls.js-支持 HLS 流媒体播放和普通 MP4 转换为 fMP4 格式的库

  1. 动态加载 HLS 流时自动使用 fMP4 分片。
  2. 不需要手动转换文件
javascript 复制代码
<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('output.m3u8'); // HLS 索引文件的 URL
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
  }
</script>

Shaka Player-动态加载和转换 MP4 文件为 fMP4 格式,特别是用于 DASH 流。

GitHub - shaka-project/shaka-player: JavaScript player library / DASH & HLS client / MSE-EME player

相关推荐
开开心心_Every10 小时前
便捷的电脑自动关机辅助工具
开发语言·人工智能·pdf·c#·电脑·音视频·sublime text
Antonio91513 小时前
【音视频】TS协议介绍
音视频
来自宇宙的曹先生17 小时前
【视频观看系统】- 技术与架构选型
架构·音视频
mulannanlu20 小时前
视频音频转换器V!P版(安卓)安装就解锁V!P!永久免费使用!
音视频·软件·软件下载
一只特立独行的程序猿1 天前
手机、平板音频软件开发调测常用命令
音视频
来自宇宙的曹先生1 天前
视频网站弹幕系统简易实现
spring boot·音视频
hjjdebug1 天前
ffplay6 播放器关键技术点分析 1/2
c++·ffmpeg·音视频
_pengliang2 天前
WebRTC 双向视频通话
音视频·webrtc
开开心心_Every2 天前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
沐尘而生2 天前
【AI智能体】智能音视频-硬件设备基于 WebSocket 实现语音交互
大数据·人工智能·websocket·机器学习·ai作画·音视频·娱乐