区别
| 类别 | MP4 | FMP4（Fragmented MP4） |
|---|
| 存储结构 | 视频文件整体存储为一个连续文件，moov 元数据通常在文件末尾 | 视频分成多个片段，每个片段包含独立的元数据（分片） |
| 播放需求 | 必须先下载 moov 元数据后才能播放 | 可边下载边播放，适合流媒体播放 |
| 适用场景 | 适合本地播放或完整文件下载后播放 | 流媒体播放，例如 DASH、HLS 或通过 MediaSource API 进行播放 |
| 文件扩展名 | .mp4 | .mp4（文件扩展名相同，但内部结构不同） |
| 实时性 | 需要等待整个文件可用才能开始播放 | 可实时播放，支持按需分段加载 |
| 服务器支持 | 可用普通文件服务器提供 | 需要支持流媒体的分段传输，例如支持 DASH 或 HLS 的 .m4s 分片 |
快速将 MP4 转换为 fMP4的前端库
MP4Box.js-允许操作和分片 MP4 文件
- 支持解析和操作 MP4 文件。
- 可以将普通 MP4 转换为 fMP4。
- 支持按需加载视频片段。
<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>
Shaka Player-动态加载和转换 MP4 文件为 fMP4 格式，特别是用于 DASH 流。
