聊聊 Web 视频播放的画中画模式

来源:http://www.chinese-glasses.com 作者:Web前端 人气:102 发布时间:2020-03-16
摘要:时间: 2019-11-19阅读: 69标签: 视频 IT之家10月19日消息 谷歌Chrome70的Windows,Mac和Linux版本现在已经将画中画功能设置为默认启用。这样如果在网站上观看视频的话,就可以用小窗口观看视频

时间: 2019-11-19阅读: 69标签: 视频

IT之家10月19日消息 谷歌Chrome 70的Windows,Mac和Linux版本现在已经将画中画功能设置为默认启用。这样如果在网站上观看视频的话,就可以用小窗口观看视频,视频可以出现在所有系统界面的最前端。

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了,用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方,无论你在使用其他软件还是切到其他 Tab ,都可以看到当前画面。

目前YouTube网页已经支持Chrome浏览器视频画中画,只需在视频上双击右键,然后在菜单中点击“画中画”即可。启用画中画模式后,视频会以小窗口播放,支持暂停、缩放,可以移动到屏幕上的任何位置。

最新的caniuse我们可以看到已经覆盖了很多了浏览器版本,包括 最新的 Safari 甚至移动 Android 的 Chrome 浏览器。

要在其他网站上使用Chrome画中画功能,需要从Chrome应用店安装画中画扩展程序。安装完成后,会在Chrome工具栏中看到画中画图标。在视频网站上按下该图标会将该视频投射到浮动窗口中。这适用于几乎任何其它网站,不过不知为何IT之家测试优酷并不支持。

特征检测

我们可以通过 video 元素上的 requestPictureInPicture 的方法以及 document.pictureInPictureElement 来判断浏览器是否支持画中画模式。

if ('pictureInPictureEnabled' in document) {// do something} else {// not support }if (typeof videoEl.requestPictureInPicture === 'function') { // do something} else {// not support}

API 调用

我们可以通过调用requestPictureInPicture来实现画中画播放模式。

本文由10bet发布于Web前端,转载请注明出处:聊聊 Web 视频播放的画中画模式

关键词:

上一篇:sass 的学习笔记

下一篇:没有了

最火资讯