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 转换为 fMP4fetch('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 索引文件的 URLhls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function () {video.play();});}
</script>