H5视频播放器开发-画中画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wanshaobo888/article/details/86308370

最新更新时间：2019年1月11日16:59:54

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：画中画

概述

画中画功能是chrome70+的新功能，视频窗口能够从浏览器独立出来播放视频，看起来像是一个本地应用。

添加画中画功能

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

感谢阅读，欢迎评论^-^

打赏我吧^-^