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 开始支持 <video> 标签时，苹果人为设置了很多限制，例如视频无法自动播放 —— 甚至连 Meta 信息预加载都被禁用。显然，这是为了避免给用户造成高额流量费用而作出的妥协，顺便还能节省用户手机电量。

随着视频的普及，在 iOS 8 中，苹果放宽了对 Safari 视频播放的限制：允许使用 preload="metadata" 来预加载视频 Meta 信息。但仅此而已，Safari 中的 <video> 元素仍然无法自动播放，也无法内联播放 —— 这意味着视频只能在用户主动操作后才能播放，且播放时必须全屏。

至于「用户主动操作」具体指的是哪些行为，苹果官方有详细的说明：

• 点击视频播放按钮；
• 触发 touchend、click、doubleclick 或 keydown 事件，且在事件处理函数中直接调用 video.play() 方法。显然，button.addEventListener('click', () => { video.play(); }) 满足要求；而 video.addEventListener('canplaythrough', () => { video.play(); }) 不满足要求；

值得注意的是，上面讨论的是 iOS 自带 Safari 的视频播放政策。对于 iOS APP 而言，开发者在给 webview 设置 mediaPlaybackRequiresUserAction 和 allowsInlineMediaPlayback 属性之后，页面中的 <video> 标签就可以通过 autoplay 和 webkit-playsinline 属性来启用自动播放和内联播放功能。

iOS 10 新政策

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

自动播放

iOS 10 Safari 允许自动播放以下两种视频：

• 无音轨视频；
• 无声音视频（设置了 muted 属性）；

对于这两种类型的视频，可以通过 <video autoplay> 或 video.play() 两种方式来自动播放，无需用户主动操作。但是，如果它们在播放时变得有声音（获取了音轨，或者 muted 属性被取消），Safari 会暂停播放。

通过 <video autoplay> 自动播放的视频元素还需要满足一个条件：在可视区域内。同样，如果它们在播放时因为页面滚动等原因导致不可见，Safari 也会暂停播放。

通过 video.play() 自动播放的视频元素无需可见。video.play() 返回的是 Promise，如果不满足自动播放条件，会触发 reject 行为。

内联播放

在 iOS 10 Safari 中，通过 <video playsinline> 可以让视频内联播放。设置了 playsinline 属性的视频在播放时不会自动全屏，但用户可以点击全屏按钮来手动全屏；没有设置 playsinline 的视频会在播放时自动全屏。无论是否设置 playsinline 属性，退出全屏后视频都会继续播放。

playsinline 属性在 iOS 10 之前需要写成 webkit-playsinline，它的浏览器厂商前缀在 iOS 10 中被移除。但是目前 iOS 微信还不支持去掉前缀的写法，两个属性最好都加上。

显然，<video autoplay> 必须和 playsinline 属性一起使用。也就是说，只有默认内联播放的视频才有可能自动播放，这一点很容易理解。

一些典型应用

根据苹果公司的文章：GIF 相比 H.264 编码的视频，带宽占用为十二倍，电池消耗为两倍。没有声音的 <video> 元素很适合用作网页背景，取代 GIF：

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

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

这段代码使用 <video> 来替代 GIF 动画，并考虑了降级。但在 iOS 10- Safari 中，由于视频无法自动并内联播放，体验很差。要解决这个问题，可以使用 CSS 的 Media Queries：

<style>
#either-gif-or-video video { display: none; }
@media (-webkit-video-playable-inline) {
    #either-gif-or-video img { display: none; }
    #either-gif-or-video video { display: initial; }
}
</style>

<div id="either-gif-or-video">
  <video src="image.mp4" autoplay loop muted playsinline></video>
  <img src="image.gif">
</div>

由于没有声音的 <video> 元素可以通过调用 video.play() 来自动播放，并且 <video> 元素不需要插入到 DOM 中，我们还可以使用 <canvas> 来做为视频播放的容器，这样就可以方便地修改视频画面了。示意代码如下：

var video;
var canvas;

function startPlayback() {
    if (!video) {
        video = document.createElement('video');
        video.src = 'image.mp4';
        video.loop = true;
        video.addEventListener('playing', paintVideo);
    }
    video.play();
}

function paintVideo() {
    if (!canvas) {
        canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        document.body.appendChild(canvas);
    }
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    if (!video.paused) {
        requestAnimationFrame(paintVideo);
    }
}

startPlayback();

本文主要内容来自于 Webkit 官方博客：New <video> Policies for iOS。

原文链接：https://imququ.com/post/new-video-policies-for-ios10.html，前往原文评论 »