Google Chrome 如何正确使用画中画

前段时间 Chrome 70 更新,新增了一项功能:画中画播放视频。这项功能可以让 Chrome 在支持的系统平台上,让视频以画中画的形式播放,类似 Windows 10 上哪个 UWP 的画中画,就是独立悬浮视频窗口。

这项功能对于喜欢一边干其他事,一边用看视频的人来说很实用,特别是屏幕比较小的情况下,终于能把网页里的视频窗口给独立出来了。

但是这个功能很多人不知道怎么用,即使知道怎么用,发现在很多视频网站上用不了,特别是国内的一些视频网站。

小山今天就教大家如何正确使用 Google Chrome 的画中画功能。

Google Chrome 画中画

其实想使用画中画功能特别简单,只需要用鼠标右键来点击网站上的视频,在弹出的菜单里选择画中画就可以了,如果点一次没有弹出画中画菜单,就点击两次,像下面这样。

Chrome 视频菜单

但是在一些视频网站,特别是国内视频网站用这种方法的时候会发现一个问题,即使点击两次右键,浏览器原生的功能菜单也出来了,但是并没有画中画的选项,难道是这个视频网站不支持吗,非也非也。

这是因为有些视频网站会给视频窗口加一层 div 遮罩,而当你点击视频窗口的时候,点击的并不是视频窗口,而是在视频窗口上面那层 div 遮罩,这样一来,浏览器并不会认为你点击的是视频,所以就没有弹出视频的功能菜单。

那么怎么解决这个问题呢?

有两种方法:

第一种呢,把这层 div 遮罩给删了,然后再点击视频窗口,这种方法比较麻烦,而且呢,删除这层 div 遮罩会造成某些功能丢失,例如:视频弹幕。暂且不讲。

第二种呢,用画中画 Web API 让视频窗口以画中画的形式显示,这个 API 是方便网站来添加启用画中画的相关操作,当然,我们也可以手动来使用这个 API,而且对网站本身的视频功能没有任何影响。

如何使用这个 API 呢,我把它分为两种方式,一种是手动操作,适合不怕麻烦的人,一种是一键化,适合小白和图方便的。

先来讲手动操作,其实也很简单。

先进入播放视频的网页,然后按 F12 打开浏览器开发者工具,点击 [Console] 选项卡,在下面输入document.querySelector("video").requestPictureInPicture()给页面中第一个视频启用画中画,如果想关闭画中画,输入document.exitPictureInPicture()退出当前页面的画中画。

如果你觉得每次启用和退出很麻烦,我也提供了一种简便的方法。

javascript:if(document.pictureInPictureElement===document.querySelector("video"))document.exitPictureInPicture(); else document.querySelector("video").requestPictureInPicture();

打开书签管理器,添加书签,书签的网址填上面这段代码,保存。需要当前网页视频开启或退出画中画的时候,在书签栏点击这个书签就行了。

Chrome 画中画

好了,大家如果对上面有任何疑问,欢迎加入 QQ 群与我交流。

微信公众号二维码

微信扫描二维码关注我们

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据