MP4 与Fragmented MP4 (fMP4)的区别

区别

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

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

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

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

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

<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 格式的库

动态加载 HLS 流时自动使用 fMP4 分片。
不需要手动转换文件

<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>