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

最新推荐文章于 2024-10-18 12:17:55 发布

原创最新推荐文章于 2024-10-18 12:17:55 发布 · 7.2k 阅读

8 ·

CC 4.0 BY-SA版权

web前端开发专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍如何在Chrome70+版本中实现画中画功能，使视频窗口能独立于浏览器播放，如同本地应用。文章提供了具体代码示例，包括开启、关闭画中画模式的事件监听及状态变化的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最新更新时间：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.');
});