Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >人生想要开挂,快来学习“画中画”!

人生想要开挂,快来学习“画中画”!

作者头像
腾讯IVWEB团队
发布于 2020-06-28 06:41:30
发布于 2020-06-28 06:41:30
1.9K00
代码可运行
举报
运行总次数:0
代码可运行

之前在腾讯视频刷剧时,偶然看到有一个画中画的功能非常好用,不懂就问:什么是“画中画”?说起画中画,就不得不提起我们经常干的一件事儿,我们想在PC浏览器上看电视的同时逛淘宝、刷微博、玩知乎...... 只有你想不到的,没有我玩不顺的!奈何我们只有一块屏幕(ps: 用扩展屏的大佬打扰了),这个时候就需要一个辅助英雄——画中画,来提高我们桌面利用率并提高时间效率。

何为画中画

首先请允许我介绍下“画中画”:画中画(英文Picture-in-picture,缩写PiP)是指将一个电视节目(或其他画面)显示在整个画面上,同时将另一个或多个其他画面显示在角落中,通常只播放主窗口的声音 —— from wiki

早在1976年蒙特利尔奥运会的电视报道中就出现了近似的画中画效果,其使用Quantel数字帧存储设备在开幕式期间插入奥林匹克圣火的特写照片。

在浏览器中使用画中画

随着我们日常社交生活的丰富,我们希望在浏览器上也用到画中画的功能。

近两年,浏览器厂商开始陆续支持画中画的功能,我们先来看下浏览器中画中画的效果:

使用画中画

浏览器支持情况

下面介绍目前主流浏览器上画中画的实现状态

  • Safari - 已支持
  • Chrome - 已支持
  • Firefox - 测试阶段
  • IE - 规划阶段

详情请查看Implementation Status

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版本加入画中画的特性,但在该版本中画中画是默认关闭的,如果想开启该特性,需要在浏览器执行以下操作:

  1. 输入chrome://flags并按下回车键
  2. 在搜索框依次搜索三个关键词enable-experimental-web-platform-features(启用正在开发的实验性Web平台功能)、enable-Surfaces-for-videos(启用合成到Surface而不是视频的VideoLayer)、enable-picture-in-picture(为video开启画中画特性)并将选项值置为Enabled
  3. 重启chrome浏览器
  4. 在含有视频的页面使用鼠标右击视频区域,点击菜单栏中的「画中画」选项观看视频
  • 正式开启

到了70版本已默认开启该特性,安装chrome扩展插件可进入画中画,进入画中画后,页面选项卡会出现一个蓝色的图标,以提醒用户该页面正在播放视频。

画中画图标

支持webRTC的视频流

Chrome 71中的画中画支持播放MediaStream对象的视频(例如getUserMedia(),getDisplayMedia(),canvas.captureStream())。这意味着可以显示包含用户网络摄像头视频流的画中画窗口,即可以

显示webRTC的视频流。

FireFox

目前Firefox的画中画功能还在测试之中,需要Firefox超前测试版Nightly才能开启画中画模式,具体步骤如下:

  1. 打开about:config设置页
  2. 搜索media.videocontrols.picture-in-picture.enabled点击切换,让其置为true
  3. 重启浏览器
  4. 打开含有视频页面,开始播放视频
  5. 在视频区域鼠标右键,会出现画中画菜单
  6. 开启画中画

需要注意的是,Chrome 与 Firefox 的画中画模式略有不同,Chrome 开启画中画后,浏览器内的视频将不再播放,而 Firefox 则相当于启用了双屏播放,画中画和原标签页同步播放,而且目前的画中画功能甚至没有关闭画中画视频的选项,因此必须再次鼠标右键单击才能关闭画中画功能。


开发者如何使用画中画

对于开发者而言,让用户体验到画中画模式带来的效果是最令人兴奋的,感谢浏览器爸爸提供了相应的API供我们开发者调用。由于safari实现的时间太早,而谷歌又用自己的一套API,导致API目前尚未标准化(好消息是画中画Web API的规范 已经在WICG草案阶段中了,大体上和chrome的API规范一致,具体可猛戳此处),我将对目前已支持的浏览器(chrome和safari)分别介绍其Web API:

在chrome上运行

先来看一个示例(示例中的视频源来自腾讯):

画中画-chrome示例

我们来看上述示例中用到的属性和方法:

  • document.pictureInPictureEnabled

该属性用来判断当前文档是否支持使用画中画所示的功能。(不能理解为浏览器是否支持,因为即便浏览器支持的情况下,用户禁用画中画功能也会返回false)

  • document.pictureInPictureElement

该属性返回当前文档内存在的画中画元素对象,如果不存在返回null,否则返回video element

  • video.requestPictureInPicture()

这个API是真正去请求视频进入画中画模式的,结果会返回一个promise,在promise成功回调中拿到一个pipWindow对象,这个对象包含:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{ width, height, resize }

width和height分别是视频进入画中画窗口的宽高,resize可以监听一个事件回调,在画中画窗口发生变化时触发。

① 为何API挂载到video上而不是document上?

因为一个页面可能会存在多个video,所以需要指定触发画中画的video元素。

② 那么什么情况下API会调用失败?

  1. 系统不支持画中画
  2. 由于限制性功能策略,不允许document使用画中画。
  3. 视频元数据未加载(videoElement.readyState === 0)
  4. 视频文件只有音频
  5. video元素设置了disablePictureInPicture新属性
  6. 画中画的请求调用不是通过用户手势事件(例如按钮点击)处理的,此处需要注意像mouseovermouseentermousemovemouseleavescrollonload等事件都不算用户手势事件。
  • document.exitPictureInPicture()

当我们想主动退出画中画,可以调用这个API,其结果也会返回一个promise。

① 为何API挂载到document而不是video上?

因为目前一个页面最多仅允许一个video显示在画中画窗口上。对于开发者而言,不需要退出画中画的是哪个video,因此只需要挂载到document上就可以了。

  • onenterpictureinpicture和onleavepictureinpicture

当我们想监听video是否真正进入/退出画中画时,有时候进入/退出画中画并不是我们通过调用requestPictureInPicture/exitPictureInPicture来触发的,比如用户通过chrome插件让视频进入画中画,这个时候需要监听这两个事件,来获取一些有用的信息并进行上报之类的行为。

在safari上运行

由于safari早在2016年就原生支持了画中画,因此API和chrome是完全不一致的。在safari里我们可以把“画中画”理解为播放模式的概念,safari中的播放模式只有三种,分别是inlinepicture-in-picturefullscreen

我们先来看一个简单的示例:

画中画-safari示例

从上面示例可以看出,画中画相关属性和方法都是挂载到具体的视频元素上。

我们来看上述示例中用到的属性和方法:

  • video.webkitSupportsPresentationMode(mode)

该方法是检测video元素所支持的“演示模式”(一般理解为播放模式),这里传参mode支持三个有效值:picture-in-pictureinlinefullscreen

一般有两种方式来判断是否支持画中画。第一种就是上述示例所介绍的,第二种即:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<video autopictureinpicture></video>

这意味着不需要开发者手动调用方法来执行画中画的行为,当页面文档隐藏时,最近设置了autopictureinpicture属性的video元素就会自动进入Picture-in-Picture(如果允许画中画的话),当页面文档可见时,画中画中的视频元素会自动离开。


参考文档

让 Chrome 与 Firefox 实现系统级视频画中画效果

Picture-in-Picture

https://github.com/WICG/picture-in-picture/

https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
这个Web新API让任何内容都能画中画!
“画中画”(Picture-in-Picture, PiP)说白了,就是让你能一边看视频,一边干别的,互不耽误。就像给你的桌面贴了个能播放视频的“便利贴”,你可以随便拖动它,调整大小,它还总在最前面,贼方便。
Immerse
2025/05/04
1700
这个Web新API让任何内容都能画中画!
Chrome 116:网页画中画 API 来了!
Chrome 116 刚刚发布了正式版本,其中比较值得关注的新增功能就是网页的画中画 API 了(Document Picture in Picture API )。
ConardLi
2023/08/23
9010
Chrome 116:网页画中画 API 来了!
基于Vue.js2.6结合h5来实现视频播放画中画技术(Picture-in-Picture)
    在开发基于vue.js的在线视频教育平台的时候,我们会注意一个小问题,就是如果用户在观看播放视频的同时,也会往下拖动窗口浏览一些评论,这样视频就会被滚动条覆盖,导致用户无法在浏览评论的同时观看视频,同理,如果想边刷微博边追剧怎么办?想边聊微信边看球赛怎么办?
用户9127725
2022/08/08
1.2K0
基于Vue.js2.6结合h5来实现视频播放画中画技术(Picture-in-Picture)
浏览器画中画模式
浏览器画中画模式 浏览器画中画功能允许用户在一个小的叠加窗口中弹出网页中播放的视频 ?,Chrome 版本大于 71 均默认开启该功能。下面简单介绍一下该 API 如何使用 ? 准备工作 首先要有个
JS菌
2019/04/10
3.4K0
浏览器画中画模式
Android开发笔记(一百六十七)Android8.0的画中画模式
前面的博文《Android开发笔记(一百五十九)Android7.0的分屏模式》介绍了Android7.0的多窗口特性,但是这个分屏的区域是固定的,要么在屏幕的上半部分,要么在屏幕的下半部分,不但尺寸无法调整而且还不能拖动,使得它的用户体验不够完美。为此Android8.0又带了另一种更高级的多窗口模式,号称“Picture in Picture”(简称PIP,即“画中画”)。应用一旦进入画中画模式,就会缩小为屏幕上的一个小窗口,该窗口可拖动可调整大小,非常适合用来播放视频。那么如何才能让App支持画中画呢?接下来将对画中画的开发工作进行详细介绍。 经过前面的学习,大家知道Activity默认是支持分屏模式的,当然开发者要给activity节点添加下面的属性描述,从而声明允许分屏也是可以的:
aqi00
2019/01/18
2.5K0
腾讯云音视频播放器又上新啦!短视频秒开组件、加密画中画等功能让音视频播放更专业!
根据腾讯云音视频官方的消息显示,播放器SDK是音视频终端SDK的子产品之一,它采用“腾讯视频”同款播放内核,经过内部业务长期优化和海量服务验证,对比系统播放器性能可提升20%-50%,同时具备“臻彩视听”、精准Seek、画中画等丰富功能,为用户提供直播、点播场景下流畅稳定的音视频播放能力,覆盖泛娱乐、电商、教育等多样化音视频业务场景,支持Web/H5、iOS、Android、Flutter平台。
三掌柜
2023/12/29
1.1K4
腾讯云音视频播放器又上新啦!短视频秒开组件、加密画中画等功能让音视频播放更专业!
[UWP]用画中画模式(CompactOverlay Mode)让用总在最前端显示
Windows 10 Creators Update以后UWP提供了一个新的视图模式CompactOverlay,中文翻译成 紧凑的覆盖层?反正大部分时间我们都会称它为画中画模式。
dino.c
2020/02/13
1.5K0
AVKit框架详细解析(二) —— 基于视频播放器的画中画实现(一)
如今,用户希望能够使用Picture in Picture (PiP) - 画中画播放视频。 PiP 模式将视频内容最小化到一个小窗口中,允许用户进行多任务处理。 在本教程中,您将学习如何向使用 UIKit 构建的现有视频应用程序添加画中画支持。
conanma
2021/09/04
3.3K0
怎么用 JavaScript 构建自定义的 HTML5 视频播放器
在网页中观看和分享视频内容是一个很常见的功能,多年来,视频嵌入网页的方式发生了变化。现在,我们在现代浏览器中使用 <video> 标签就可以添加视频文件到网页上,该标签支持多个视频格式。
Jimmy_is_jimmy
2023/03/09
11.9K0
怎么用 JavaScript 构建自定义的 HTML5 视频播放器
Android画中画(PIP)模式使用
现在手机端各大视频APP基本都有悬浮窗视频模式,我以前文章《Android制作带悬浮窗控制的录屏程序Demo》《Android实现可移动的悬浮窗》有介绍过悬浮窗的使用方式,而到了Android8.0时推出来画中画模式,就是让当前的Activity缩小后显示在其它Activity的上方,使用起来也非常的简单,本篇我们就来试试Android8.0后推出的画中画模式。
Vaccae
2022/12/29
2.7K0
Android画中画(PIP)模式使用
前端开发必读!7个HTML属性助你提升用户体验
HTML是一种强大的语言,用于创建网页。虽然大多数开发人员熟悉常用的HTML属性,但还有一些较少人知的属性可以提供额外的功能并增强用户体验。在本文中,我们将探讨7个这样的HTML属性,你可能还不知道。
前端小智@大迁世界
2023/08/16
7270
2023 年前端大事记
哈喽各位《code 秘密花园》的订阅者们,一年一度的年更系列又来了。关注我的老粉都知道,每到年末我会对前端生态在这一年的重大变化做一次总结,之前的总结:
ConardLi
2023/12/28
5490
2023 年前端大事记
FFmpeg中overlay滤镜用法-水印及画中画
overlay技术又称视频叠加技术。overlay视频技术使用非常广泛,常见的例子有,电视屏幕右上角显示的电视台台标,以及画中画功能,画中画是指在一个大的视频播放窗口中还存在一个小播放窗口,两个窗口不同的视频内容同时播放。
叶余
2019/04/02
7K2
FFmpeg中overlay滤镜用法-水印及画中画
从零开发弹幕视频播放器
这是一个系列文章。本文章将介绍,如何制作一个简单的视频播放器。用少量关键的代码来实现视频播放器核心功能。
羽月
2022/10/09
4.5K0
从零开发弹幕视频播放器
如何更优雅地看电影/刷剧
五一长假这几天看了几部电影,我不喜欢用APP看,都直接在电脑端看,这里就分享下如何优雅地看电影或者刷剧。
苏生不惑
2020/05/20
1.2K0
奥利奥好吃吗?Android 8.0新特性适配测试报告来啦!
谷歌2017 I/O开发者大会上发布了Android 8.0的正式版, 其官方代号为Oreo(奥利奥)。网上关于Android8.0新功能特性的介绍已铺天盖地,新功能特性会对程序应用带来哪些影响呢,我们从兼容性角度来看下这部分变化。
WeTest质量开放平台团队
2018/10/29
1.2K0
奥利奥好吃吗?Android 8.0 新特性适配测试报告来啦!
WeTest质量开放平台团队
2017/10/19
2.6K0
奥利奥好吃吗?Android 8.0 新特性适配测试报告来啦!
Android画中画(PIP)进阶---Action按钮的使用
上一篇《Android画中画(PIP)模式使用》介绍了画中画的使用,今天这篇来讲讲Action按钮的使用,主要是广播方式更新UI及Android 12后的兼容性问题。
Vaccae
2022/12/29
1.3K0
Android画中画(PIP)进阶---Action按钮的使用
技术解码 | 深入解析Web OBS的实现
Web 上实现直播推流的方式主要有两种,一种是通过 Flash 推流,一种是通过 WebRTC 推流。目前主流浏览器已经放弃了对 Flash 的支持,Chrome 从 88 版本开始彻底禁用了 Flash。因此,使用 WebRTC 进行直播推流成为了 Web 上最好的选择。
腾讯云音视频
2022/04/29
2K0
技术解码 | 深入解析Web OBS的实现
在P站做web前端,是种怎样的体验?
作者 | David Walsh 翻译 | 博轩 来源 | https://davidwalsh.name/pornhub-interview 今天,给大家分享一篇重口味的文章,请系好安全带。 对,你没看错,是P站,不是B站(bilibli)。 何谓P站?全称Pornhub,全球最大的sex影片分享网站,你们懂得。 坊间有云:没上过P站的程序员,不是一名优秀的前端切图仔。 无论你对不可描述内容采取什么立场,都无法否认成人网站行业对于推动 Web 的发展产生着巨大的影响。 从提高浏览器的视频限制,到通过 W
程序猿DD
2023/04/04
1.5K0
在P站做web前端,是种怎样的体验?
推荐阅读
相关推荐
这个Web新API让任何内容都能画中画!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验