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

相关推荐
一条数据库9 小时前
南京方言数据集|300小时高质量自然对话音频|专业录音棚采集|方言语音识别模型训练|情感计算研究|方言保护文化遗产数字化|语音情感识别|方言对话系统开发
人工智能·音视频·语音识别
therese_1008613 小时前
音视频demo
音视频
~远在太平洋~21 小时前
Debian 系统上安装与配置 MediaMTX
音视频
杨天天.1 天前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
面向星辰2 天前
html音视频和超链接标签,颜色标签
前端·html·音视频
SXJR2 天前
Java mp4parser 实现视频mp4 切割
java·python·音视频
却道天凉_好个秋2 天前
音视频学习(六十三):AVCC和HVCC
音视频·h264·h265·avcc·hvcc
victory04312 天前
疾病语音数据集 WAV格式音频
深度学习·音视频
电商API_180079052472 天前
淘宝商品视频批量自动化获取的常见渠道分享
java·爬虫·自动化·网络爬虫·音视频