概述
画中画功能是chrome70+的新功能,视频窗口能够从浏览器独立出来播放视频,看起来像是一个本地应用。
添加画中画功能
//document.pictureInPictureElement 获取画中画元素
//document.pictureInPictureEnabled 判断是否支持画中画
/*
<video
controls
controlslist="nodownload" //禁用下载
class="video-player"
disablePictureInPicture // 禁用画中画
oncontextmenu = "return false" //禁用鼠标右键
></video>
controlslist:取值如下,设定多个空格间隔
nodownload:取消更多控件弹窗的下载功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消远程播放视频
*/
var video = document.createElement("VIDEO");
var togglebtn = document.getElementById('btn');
//添加画中画功能开启关闭事件
togglebtn.addEventListener('click', function() {
if (!document.pictureInPictureElement) {//开启
video.requestPictureInPicture().catch(error => {
console.log(error,'Video failed to enter Picture-in-Picture mode.');
});
} else {//关闭
document.exitPictureInPicture().catch(error => {
console.log(error,'Video failed to leave Picture-in-Picture mode.');
});
}
});
//video元素添加事件
video.addEventListener('enterpictureinpicture', function(event) {
console.log('Video entered Picture-in-Picture mode.');
});
//video元素添加事件
video.addEventListener('leavepictureinpicture', function(e) {
console.log('Video left Picture-in-Picture mode.');
});
参考资料
官方文档
官方demo
一、下面播报一则新闻
Chrome 70已经原生支持 HTML 5
<video>
播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbwxCdh1mcvZ2LcV2Zh1Wa9M3clN2byBXLzN3btg3PwU1VPBTQ61UMFpWWzUlMOhXV610MjRkWq5EVZl3ZqpVaGpmWxU0RNFzZ6xkdSNTW5Z1RaZnTywEd5ITW1dmeOpnTqxEejdlYwlTeMZTTINGMShUYvwlbj5yZtlmbkN3YuQnclZnbvN2Ztl2Lc9CX6MHc0RHaiojIsJye.jpg)
我一瞅自己的Chrome浏览器,正好就是Chrome 70,体验了一番,挺有意思的,值得介绍下,以后估计用得着。
二、先看画中画实例demo
请确保您的浏览器支持画中画,然后可以狠狠地点击这里: Video视频画中画效果demo
点击页面的切换按钮,或者右键视频→画中画,都可以进入视频画中画模式:
在页面右下角可以看到一个小视频,尺寸小小的视频:
实际上,此时的这个小视频是个脱离于浏览器定位的,顶级的播放窗口,我们把浏览器最小化,此视频依然会在右下角播放,就像腾讯视频客户端播放器的精简模式一样:
于是,我们可以一边码代码,一边看网页视频了。
三、画中画几个API简介
画中画看上去很酷,总感觉API也会很复杂,实际上,除了名称长了点,超简单的。
假设变量video就是我们的
<video>
视频元素,则,进入画中画模式,直接一句:
// 进入画中画
video.requestPictureInPicture();
退出画中画模式,也是一句:
// 退出画中画
document.exitPictureInPicture();
为了方便我们监听视频的播放状态,还提供了2个事件API接口,如下:
// 进入画中画模式时候执行
video.addEventListener('enterpictureinpicture', function() {
// 已进入画中画模式
});
// 退出画中画模式时候执行
video.addEventListener('leavepictureinpicture', function() {
// 已退出画中画模式
});
最后,还提供了一个PictureInPictureWindow对象,也就是画中画窗口对象,包含
width
,
height
和
onresize
这些属性,示意如下:
{
height: 192,
onresize: null,
width: 341
}
width
,
height
表示小窗口现在的高度和宽度,
onresize
属性值是个Function,可以监听小窗口尺寸的改变。PictureInPictureWindow对象的获取在画中画响应事件的event对象中,例如:
video.addEventListener('enterpictureinpicture', function(event) {
var pipWindow = event.pictureInPictureWindow;
// pipWindow就是一个PictureInPictureWindow对象
// 我们可以绑定resize事件
pipWindow.addEventListener('resize', function () {
// pipWindow.width就是小视频窗口的宽度
// pipWindow.height就是小视频窗口的高度
});
});
以上,基本上就是HTML video Picture-in-Picture画中画技术全部API了,两个方法(进入和退出),两个事件(进入和退出)以及一个对象(画中画窗体对象)。
这点程度的学习相信大家一定都毫无压力。
四、最后再说点啥
当视频进入画中画模式的时候,浏览器的标签页上会出现一个方框框小标志,同时title提示也会发生变化,如下截图:
当进入画中画模式的时候,原视频会停止播放、置灰,并提示已进入画中画模式:
如果对完整的交互实现感兴趣,可以参见demo页面底部的JS源代码。
其他资源:
- API规范文档: Picture-in-Picture Web API
- 兼容性: https://caniuse.com/#search=picture-in-picture
————————————————
版权声明:本文为CSDN博主「万少博」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
转载于:https://blog.csdn.net/wanshaobo888/article/details/86308370
https://www.codercto.com/a/42629.html