一些网站如何在 iOS Safari 中内联播放视频？

Question

非常不可思议，因为我认为所有视频都已扩展为在常规 Safari 中全屏播放。看看这个例子：

https://entertainment.theonion.com/the-onion-reviews-rogue-one-1819596116

当我切换 Safari 选项卡时，该视频会内联播放，甚至不会停止。那里发生了什么？他们是在使用 js 和 HTML5 画布来渲染视频还是什么？他们如何将声音同步得这么好？

Answer 1

只是根据他评论中发布的link@offbeatmammal 构建一个答案。

还基于new video policies for ios，特别是：

在 iPhone 上，元素现在可以内联播放，并且在开始播放时不会自动进入全屏模式。 没有 playinline 属性的元素将继续需要全屏模式才能在 iPhone 上播放。 使用捏合手势退出全屏时，没有内联播放的元素将继续内联播放。

关于playsinline 属性的说明：

这个属性最近被添加到 HTML 规范中，并且 WebKit 通过取消其旧的 webkit-playsinline 属性的前缀来采用这个新属性。从 iPhoneOS 4.0 开始支持这个旧属性，并且根据我们更新的取消前缀策略，我们很高兴能够取消 webkit-playsinline 的前缀。不幸的是，此更改并未终止 iOS 10 Developer Seed 2。如果您想在 iOS Developer Seed 2 中试验此新策略，前缀属性将起作用，但我们鼓励您过渡到无前缀属性将来的种子中支持它时的属性。

最后一个例子：

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

带有在视频错误上显示图像的后备

function fallback(video)
{
  var img = video.querySelector('img');
  if (img)
    video.parentNode.replaceChild(img, video);
}