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

相关推荐
帅得不敢出门1 天前
Android Framework打电话禁止播放运营商视频彩铃
android·java·framework·音视频
Antonio9151 天前
【音视频】WebRTC QoS 概述
音视频·webrtc
水印云1 天前
视频提取文字用什么软件好?分享6款免费的视频转文字软件!
人工智能·音视频·语音识别
Hody911 天前
【XR技术概念科普】VST(视频透视)vs OST(光学透视):解码MR头显的两种核心技术路径
音视频·mr
DogDaoDao1 天前
深入解析quiche开源项目:从QUIC协议到云原生实践
音视频·实时音视频·tcp·quic·视频直播·流媒体协议·quiche
gf13211112 天前
拉长视频时长的两种方法
数据库·音视频
zjj5872 天前
服务器音频查找
服务器·windows·音视频
qianbo_insist2 天前
基于三维反投影矫正拼接视频
数码相机·音视频