作者:杰里米
阅读时间:5~10min
之前在腾讯视频刷剧时,偶然看到有一个画中画的功能非常好用,不懂就问:什么是“画中画”?说起画中画,就不得不提起我们经常干的一件事儿,我们想在PC浏览器上看电视的同时逛淘宝、刷微博、玩知乎...... 只有你想不到的,没有我玩不顺的!奈何我们只有一块屏幕(ps: 用扩展屏的大佬打扰了),这个时候就需要一个辅助英雄——画中画,来提高我们桌面利用率并提高时间效率。
何为画中画
首先请允许我介绍下“画中画”:画中画(英文Picture-in-picture,缩写PiP)是指将一个电视节目(或其他画面)显示在整个画面上,同时将另一个或多个其他画面显示在角落中,通常只播放主窗口的声音 —— from wiki
早在1976年蒙特利尔奥运会的电视报道中就出现了近似的画中画效果,其使用Quantel数字帧存储设备在开幕式期间插入奥林匹克圣火的特写照片。
在浏览器中使用画中画
随着我们日常社交生活的丰富,我们希望在浏览器上也用到画中画的功能。
近两年,浏览器厂商开始陆续支持画中画的功能,我们先来看下浏览器中画中画的效果:
浏览器支持情况
下面介绍目前主流浏览器上画中画的实现状态
- Safari - 已支持
- Chrome - 已支持
- Firefox - 测试阶段
- IE - 规划阶段
Safari
早在2016年9月,Safari通过macOS Sierra中的WebKit API添加了Picture-in-Picture支持。相比chrome,safari在自带的播放控件内加入了画中画模式的按钮。
Chrome
- 试验性功能
2017年4月,Chrome通过使用原生Android API发布Android O,可以自动在移动设备上播放画中画视频。 2018年10月,Chrome在PC 客户端69版本加入画中画的特性,但在该版本中画中画是默认关闭的,如果想开启该特性,需要在浏览器执行以下操作:
- 输入
chrome://flags
并按下回车键 - 在搜索框依次搜索三个关键词
enable-experimental-web-platform-features
(启用正在开发的实验性Web平台功能)、enable-Surfaces-for-videos
(启用合成到Surface而不是视频的VideoLayer)、enable-picture-in-picture
(为video开启画中画特性)并将选项值置为Enabled
。 - 重启chrome浏览器
- 在含有视频的页面使用鼠标右击视频区域,点击菜单栏中的「画中画」选项观看视频
- 正式开启
到了70版本已默认开启该特性,安装chrome扩展插件可进入画中画,进入画中画后,页面选项卡会出现一个蓝色的图标,以提醒用户该页面正在播放视频。
支持webRTC的视频流
Chrome 71中的画中画支持播放MediaStream对象的视频(例如getUserMedia(),getDisplayMedia(),canvas.captureStream())。这意味着可以显示包含用户网络摄像头视频流的画中画窗口,即可以 显示webRTC的视频流。
FireFox
目前Firefox的画中画功能还在测试之中,需要Firefox超前测试版Nightly才能开启画中画模式,具体步骤如下:
- 打开
about:config
设置页 - 搜索
media.videocontrols.picture-in-picture.enabled
点击切换,让其置为true
- 重启浏览器
- 打开含有视频页面,开始播放视频
- 在视频区域鼠标右键,会出现画中画菜单
- 开启画中画
需要注意的是,Chrome 与 Firefox 的画中画模式略有不同,Chrome 开启画中画后,浏览器内的视频将不再播放,而 Firefox 则相当于启用了双屏播放,画中画和原标签页同步播放,而且目前的画中画功能甚至没有关闭画中画视频的选项,因此必须再次鼠标右键单击才能关闭画中画功能。
开发者如何使用画中画
对于开发者而言,让用户体验到画中画模式带来的效果是最令人兴奋的,感谢浏览器爸爸提供了相应的API供我们开发者调用。由于safari实现的时间太早,而谷歌又用自己的一套API,导致API目前尚未标准化(好消息是画中画Web API的规范 已经在WICG草案阶段中了,大体上和chrome的API规范一致,具体可猛戳此处),我将对目前已支持的浏览器(chrome和safari)分别介绍其Web API:
在chrome上运行
先来看一个示例(示例中的视频源来自腾讯):
我们来看上述示例中用到的属性和方法:
- document.pictureInPictureEnabled
该属性用来判断当前文档是否支持使用画中画所示的功能。(不能理解为浏览器是否支持,因为即便浏览器支持的情况下,用户禁用画中画功能也会返回false)
- document.pictureInPictureElement
该属性返回当前文档内存在的画中画元素对象,如果不存在返回null,否则返回video element
- video.requestPictureInPicture()
这个API是真正去请求视频进入画中画模式的,结果会返回一个promise,在promise成功回调中拿到一个pipWindow对象,这个对象包含:
{ width, height, resize }
复制代码
width和height分别是视频进入画中画窗口的宽高,resize可以监听一个事件回调,在画中画窗口发生变化时触发。
① 为何API挂载到video上而不是document上?
因为一个页面可能会存在多个video,所以需要指定触发画中画的video元素。
② 那么什么情况下API会调用失败?
- 系统不支持画中画
- 由于限制性功能策略,不允许document使用画中画。
- 视频元数据未加载(videoElement.readyState === 0)
- 视频文件只有音频
- video元素设置了
disablePictureInPicture
新属性 - 画中画的请求调用不是通过用户手势事件(例如按钮点击)处理的,此处需要注意像
mouseover
、mouseenter
、mousemove
、mouseleave
、scroll
、onload
等事件都不算用户手势事件。
- document.exitPictureInPicture()
当我们想主动退出画中画,可以调用这个API,其结果也会返回一个promise。
① 为何API挂载到document而不是video上?
因为目前一个页面最多仅允许一个video显示在画中画窗口上。对于开发者而言,不需要退出画中画的是哪个video,因此只需要挂载到document上就可以了。
- onenterpictureinpicture和onleavepictureinpicture
当我们想监听video是否真正进入/退出画中画时,有时候进入/退出画中画并不是我们通过调用requestPictureInPicture/exitPictureInPicture来触发的,比如用户通过chrome插件让视频进入画中画,这个时候需要监听这两个事件,来获取一些有用的信息并进行上报之类的行为。
在safari上运行
由于safari早在2016年就原生支持了画中画,因此API和chrome是完全不一致的。在safari里我们可以把“画中画”理解为播放模式的概念,safari中的播放模式只有三种,分别是inline
、picture-in-picture
、fullscreen
。
我们先来看一个简单的示例:
从上面示例可以看出,画中画相关属性和方法都是挂载到具体的视频元素上。
我们来看上述示例中用到的属性和方法:
- video.webkitSupportsPresentationMode(mode)
该方法是检测video元素所支持的“演示模式”(一般理解为播放模式),这里传参mode支持三个有效值:picture-in-picture
、inline
、fullscreen
。
一般有两种方式来判断是否支持画中画。第一种就是上述示例所介绍的,第二种即:
let supportsPiP = false;
try {
supportsPiP = video.webkitSupportsPresentationMode('picture-in-picture');
} catch(e) {
supportsPiP = false;
}
复制代码
如果webkitSupportsPresentationMode传入无效值,会抛出error,如下所示:
- video.webkitPresentationMode
这个属性值返回的其实就是上面播放模式的三个有效值之一。可以用该属性判断当前video所处的模式是否为画中画。
- video.webkitSetPresentationMode(mode)
这个方法可以设置当前模式,当mode='picture-in-picture',就等效于chrome中的video.requestPictureInPicture()。当mode='inline',就等效于chrome中的document.exitPictureInPicture()。需要注意的是,在safari里调用此方法进入/退出画中画,都没有返回值,当然也不会报错。
- onwebkitpresentationmodechanged
当前播放模式发生变化时可以通过这个事件监听,无论是进入/退出画中画,都会触发此事件的监听回调。需要注意的是这里不会返回画中画窗口下的对象信息(包括窗口width、height等)
无论在safari/chrome,如果画中画内播放的是实时音视频流,浏览器会在退出画中画时暂停掉视频的播放,需要在退出画中画后手动触发视频流继续播放。
polyfill兼容
根据目前画中画的支持情况,这里有一个画中画polyfill库可以兼容到chrome和safari
自动画中画
在WICG Picture-in-Picture草案中提到了自动画中画的特性:
“ 某些页面的video元素想要自动进入/退出画中画,例如,当用户在Web应用程序与其他应用tab之间来回切换时,视频Web应用程序将受益于一些自动画中画行为。但很遗憾,用户手势目前是做不到的,所以就需要Auto Picture-in-Picture了!”
我们只需要给video元素加入一个新属性autopictureinpicture
:
<video autopictureinpicture></video>
复制代码
这意味着不需要开发者手动调用方法来执行画中画的行为,当页面文档隐藏时,最近设置了autopictureinpicture属性的video元素就会自动进入Picture-in-Picture(如果允许画中画的话),当页面文档可见时,画中画中的视频元素会自动离开。
参考文档
让 Chrome 与 Firefox 实现系统级视频画中画效果
developers.google.com/web/updates…
关注【IVWEB社区】公众号获取每周最新文章,通往人生之巅!