H5 video视频播放器开发-Picture-in-Picture画中画技术

最新推荐文章于 2024-07-18 23:45:00 发布

liu__software

最新推荐文章于 2024-07-18 23:45:00 发布

阅读量3.7k

点赞数 3

分类专栏：视频播放器文章标签： javascript

原文链接：https://blog.csdn.net/wanshaobo888/article/details/86308370

版权

视频播放器专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概述

画中画功能是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，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。

HTML5 video视频播放Picture-in-Picture画中画技术

我一瞅自己的Chrome浏览器，正好就是Chrome 70，体验了一番，挺有意思的，值得介绍下，以后估计用得着。

二、先看画中画实例demo

请确保您的浏览器支持画中画，然后可以狠狠地点击这里： Video视频画中画效果demo

点击页面的切换按钮，或者右键视频→画中画，都可以进入视频画中画模式：

HTML5 video视频播放Picture-in-Picture画中画技术

在页面右下角可以看到一个小视频，尺寸小小的视频：

实际上，此时的这个小视频是个脱离于浏览器定位的，顶级的播放窗口，我们把浏览器最小化，此视频依然会在右下角播放，就像腾讯视频客户端播放器的精简模式一样：

HTML5 video视频播放Picture-in-Picture画中画技术

于是，我们可以一边码代码，一边看网页视频了。

三、画中画几个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了，两个方法（进入和退出），两个事件（进入和退出）以及一个对象（画中画窗体对象）。

这点程度的学习相信大家一定都毫无压力。