Safari 中的 WebM 和 Opus

Question

由于 Safari 的支持不佳，在网络上使用无专利的音频和视频编解码器一直存在问题。不过，根据 Safari 15 发行说明，这种情况可能会开始改变。 iPadOS 15 上的 MSE 显然现在支持 WebM 视频，WebM 容器也支持 Opus 音频编解码器。 根据

我可以使用吗

，（WebM，Opus）情况在 i(Pad)OS 15 中并没有改变。在移动设备上，WebM 仅支持 WebRTC，而 Opus 仅在以下情况下工作：您使用 CAF 容器——其他浏览器不支持。 我的实验表明，不幸的是，

我可以使用吗

是正确的。不过，我想知道是否有人能解开这个谜团。发行说明是否像看起来的情况那样是错误的？我是否误解了发行说明？是否有一些技巧可以让您使用这些编解码器？

Answer 1

https://opus-bitrates.anthum.com/audio/music-96.webm

（audio/webm; codecs=opus）

❌从 Blob

构建

<audio>

 时

(async () => {
  const url = 'https://opus-bitrates.anthum.com/audio/music-96.webm'
  const buffer = await (await fetch(url)).arrayBuffer()
  const blob = new Blob([buffer], { type: 'audio/webm; codecs=opus' })
  const audio = new Audio(URL.createObjectURL(blob))
  audio.controls = true
  document.body.appendChild(audio)
})()

✅ 当

<audio>

与

<source>

 一起使用时

<audio controls>
  <source type="audio/webm; codecs=opus"
          src="https://opus-bitrates.anthum.com/audio/music-96.webm" />
</audio>

✅ 从 URL 构建

<audio>

时

const url = 'https://opus-bitrates.anthum.com/audio/music-96.webm'
const audio = new Audio(url)
audio.controls = true
document.body.appendChild(audio)