如何无需重新打包在HTML播放器中播放rav1e编码的IVF格式AV1视频？

你遇到的核心问题是浏览器原生不支持IVF封装格式，而且你给的<source>标签里type属性写的是video/mp4，和实际的IVF格式不匹配，这也是播放器加载失败的直接原因之一。

有没有无需重新打包的播放方法？有，但需要借助JavaScript来处理IVF流的解析和AV1解码，以下是两种可行的方案：

方案一：使用MediaSource Extensions (MSE) 自定义解析IVF流 #

浏览器的MSE API允许手动处理媒体流，你可以自己解析IVF文件的帧数据，再喂给浏览器的解码器：

1. 创建MediaSource对象并关联到video元素
2. 读取IVF文件，跳过头部（前32字节），逐个提取AV1帧数据（IVF每个帧前有8字节的长度和时间戳字段）
3. 将提取出的AV1原始帧（OBU单元）添加到SourceBuffer中

示例代码如下：

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  // 创建支持AV1编码的SourceBuffer
  const sourceBuffer = mediaSource.addSourceBuffer('video/av1');
  // 读取IVF文件
  const response = await fetch('myvideo.ivf');
  const buffer = await response.arrayBuffer();
  
  // 跳过IVF头部（前32字节）
  let offset = 32;
  while (offset < buffer.byteLength) {
    // 读取帧长度（小端字节序）
    const frameLength = new DataView(buffer, offset, 4).getUint32(0, true);
    // 跳过帧长度和时间戳字段（共8字节）
    offset += 8;
    // 提取当前帧的AV1数据
    const frameData = buffer.slice(offset, offset + frameLength);
    // 将帧数据添加到缓冲区
    sourceBuffer.appendBuffer(frameData);
    offset += frameLength;
    
    // 等待缓冲区更新完成，避免溢出
    await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
  }
});

注意：这种方法需要你确保IVF解析逻辑正确，尤其是帧长度和时间戳的读取要符合IVF格式规范。

方案二：使用第三方AV1播放器/解码器库 #

一些开源的JavaScript/Wasm库已经内置了IVF解析和AV1解码支持，比如：

• 基于FFmpeg移植的libav.js：可以直接解码IVF封装的AV1视频
• WebAssembly版的rav1e解码器：直接用rav1e的wasm版本解码IVF文件，然后将解码后的帧渲染到canvas上

这种方案需要你引入对应库，自己实现播放控制逻辑（比如播放暂停、进度条），适合对播放流程有自定义需求的场景。

补充：如果没有特殊限制，重新打包成MP4格式是最简单的解决方案，用ffmpeg命令即可快速完成：

ffmpeg -i myvideo.ivf -c:v copy myvideo.mp4

之后直接用<source src="myvideo.mp4" type="video/mp4; codecs=av01">就能正常播放。

内容的提问来源于stack exchange，提问作者jnnks