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

相关推荐
却道天凉_好个秋10 分钟前
音视频学习(三十五):aud
学习·音视频·aud
智联视频超融合平台2 小时前
智慧能源安全新纪元:当能源监测遇上视频联网的无限可能
人工智能·网络协议·音视频·能源·视频编解码
王江奎9 小时前
音视频小白系统入门课-2
音视频
18538162800余。10 小时前
碰一碰发视频系统源码搭建全解析:定制化开发
音视频
李煜鑫12 小时前
音视频相关协议和技术内容
ffmpeg·音视频
do_you_like_van_游戏17 小时前
用ffmpeg 实现拉取h265的flv视频转存成264的mp4 实现方案
ffmpeg·音视频
CoderJia程序员甲17 小时前
KrillinAI:视频跨语言传播的一站式AI解决方案
人工智能·ai·大模型·音视频·短视频
活力板蓝根18 小时前
QQ音乐的 AI 化转型范本:一款音乐 App 如何用大模型重构听歌体验?
人工智能·音视频·娱乐·用户体验
桃花岛主7021 小时前
对于在线教育或知识付费类网站视频处理方案
音视频