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

Question

非常不可思议,因为我认为所有视频都扩展到常规野外游戏中全屏播放.看看这个例子:

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

当我切换Safari标签时,该视频内联播放甚至不会停止.那里发生了什么？他们使用js和HTML5画布来渲染视频吗？他们如何很好地同步声音？

Answer 1

只是根据他的评论中发布的@offbeatmammal 链接构建答案.

同样基于ios的新视频政策,特别是:

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

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