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

Question

非常不可思议，因为我认为所有视频都扩展为常规野生动物园全屏播放。请查看以下内容：

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上播放。   使用捏合手势退出全屏时，没有playinline的元素将继续以内联方式播放。

关于playinline属性的说明：

  

最近已将此属性添加到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);
}