iOS 10 Safari新视频播放策略

随着iOS 10的正式发布，Safari也欢迎许多更新，例如增加了对ES6，CSP2.0，Shadow DOM和其他功能的支持. 本文向您介绍iOS10自己的Safari浏览器的视频播放策略的最新变化. 首先概述要点: 1）iOS 10 Safari支持自动播放特定视频； 2）iOS 10 Safari支持视频内联播放. 如果您想了解更多详细信息，请继续阅读.

以前的政策？

在iPhoneOS 3中（是的，当时还没有将iOS称为iOS），Safari开始支持

在

标签，Apple人为设置了很多限制，例如，即使禁用了Meta信息的预加载，也无法自动播放视频. 显然，这是为了避免给用户带来高流量成本而做出的折衷，而且还可以节省用户的手机电量.

随着视频的普及，在iOS 8中，苹果放宽了对Safari视频回放的限制: preload =“ metadata”允许预加载视频元信息. 就是这样，在Safari中

The

元素仍然不能自动播放，也不能内联播放-这意味着视频只能在用户积极操作后才能播放，并且在播放期间必须全屏显示.

关于“用户主动操作”的具体动作，苹果官方有详细说明:

值得注意的是，以上讨论是关于Safari随附的iOS的视频播放政策. 对于iOS APP，在设置mediaPlaybackRequiresUserAction并为webview设置allowInlineMediaPlayback属性后ios10不能播放视频，页面上的开发人员

The

标记可以通过自动播放和webkit-playsinline属性启用自动播放和内联播放.

新的iOS 10政策

随着视频的进一步普及，在iOS 10中，苹果终于进一步放松了Safari视频的播放政策.

自动播放

iOS 10 Safari允许自动播放以下两个视频:

对于这两种类型的视频，您可以通过

或video.play（）两种方式可以自动播放，而无需用户的活动操作. 但是，如果在播放过程中可以听到声音（获取音频轨道或取消静音属性），则Safari将暂停播放.

通过

自动播放的视频元素还需要满足一个条件: 在可见区域中. 同样，如果在播放过程中由于页面滚动或其他原因而看不到它们，则Safari也会暂停播放.

通过video.play（）自动播放的视频元素不需要可见. video.play（）返回一个Promise. 如果不满足自动播放条件，将触发拒绝操作.

内联播放

在iOS 10 Safari中，通过

您可以使视频内联播放. 设置了playsinline属性的视频在播放时不会自动全屏显示，但是用户可以单击全屏按钮手动全屏显示；未设置为播放的视频将在播放时自动全屏显示. 无论是否设置了playsinline属性，视频都将在退出全屏后继续播放.

在iOS 10之前，playinsinline属性需要写为webkit-playsinline，并且在iOS 10中删除了其浏览器供应商前缀. 但是，目前，iOS微信不支持删除前缀. 最好同时添加两个属性.

很明显，

必须与playsinline属性一起使用. 换句话说，只有默认情况下内联播放的视频才会自动播放，这很容易理解.

一些典型应用

根据Apple的文章: 与H.264编码的视频相比，GIF使用的带宽和功耗是其的12倍. 没有声音

该元素非常适合作为网页背景，代替GIF:

此代码使用

要替换GIF，并考虑降级. 但是在iOS 10-Safari中ios10不能播放视频，由于无法自动和内联播放视频，因此体验非常差. 要解决此问题，可以使用CSS Media Queries:

因为没有声音

可以通过调用video.play（）自动播放元素，并且

该元素不需要插入到DOM中，我们也可以使用它

作为视频播放的容器，因此您可以轻松地修改视频屏幕. 原理图代码如下:

本文的主要内容来自官方Webkit博客: 新建

链接到本文

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-187013-1.html