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

Question

这很不可思议，因为我以为所有的视频都会在普通版Safari中全屏播放。例如，看一下这个：

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

该视频内联播放时，即使我切换Safari标签也不会停止。那里发生了什么？他们使用js和HTML5画布来渲染视频吗？他们如何使声音同步如此完美？

- Gregory Magarshak

---

请参阅https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html，特别是“playsinline”属性。 - Offbeatmammal

不确定为什么会被踩。我也有同样的问题。关于移动设备上的HTML5视频的信息非常模糊。 - Sven

Answer 1

根据@offbeatmammal在评论中发布的链接，构建一个答案。

还基于iOS的新视频政策，具体如下：

在iPhone上，<video playsinline>元素现在将允许内联播放，并且当播放开始时不会自动进入全屏模式。
没有playsinline属性的<video>元素将继续要求在iPhone上全屏播放。
使用捏合手势退出全屏后，没有playsinline的<video>元素将继续内联播放。

关于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);
}

- Alan DeLonga