文章目录
❗ 本文最后更新于 2983 天前,文中所描述的信息可能已发生改变,请谨慎使用。
随着 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,参与评论 »
--EOF--
发表于 2016-10-07 15:20:46,并被添加「Safari、iOS」标签。查看本文 Markdown 版本 »
专题「浏览器」的其他文章 »
- Chrome 中 scrollingElement 的变化 (Apr 16, 2016)
- 域名小知识:Public Suffix List (Nov 28, 2015)
- window.opener.location 安全风险讨论 (Oct 09, 2015)
- 使用 SRI 增强 localStorage 代码安全 (Sep 26, 2015)
- Subresource Integrity 介绍 (Sep 23, 2015)
- 移动 Web 与 JavaScript 定时器 (Mar 27, 2014)
- Chrome 和 Web Fonts 二三事 (Mar 24, 2014)
- Webkit 异步加载 CSS 的奇怪现象 (Dec 25, 2013)
- 小成本实现部分选中的复选框 (Dec 22, 2013)
- Chrome 滚动条冻结现象 (Dec 02, 2013)
Comments
Waline 评论加载中...