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

相关推荐
站在巨人肩膀上的码农3 小时前
全志T507 音频ALSA核心层注册流程分析
驱动开发·音视频·安卓·全志·alsa·声卡
】余1853816280013 小时前
碰一碰发视频源码搭建与定制化开发:支持OEM
音视频
张晓~1833994812114 小时前
数字人分身+矩阵系统聚合+碰一碰发视频: 源码搭建-支持OEM
线性代数·矩阵·音视频
山登绝顶我为峰 3(^v^)316 小时前
如何录制带备注的演示文稿(LaTex Beamer + Pympress)
c++·线性代数·算法·计算机·密码学·音视频·latex
却道天凉_好个秋21 小时前
音视频学习(三十六):websocket协议总结
websocket·音视频
【余185381628001 天前
碰一碰发视频源码搭建定制化开发:支持OEM
音视频
EQ-雪梨蛋花汤1 天前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr
菜包eo1 天前
基于二维码的视频合集高效管理与分发技术
音视频
文浩(楠搏万)1 天前
用OBS Studio录制WAV音频,玩转语音克隆和文本转语音!
大模型·音视频·tts·wav·obs·声音克隆·语音录制
aqi001 天前
FFmpeg开发笔记(七十二)Linux给FFmpeg集成MPEG-5视频编解码器EVC
android·ffmpeg·音视频·流媒体