画中画窗口样式通过CSS的::picture-in-picture-window伪类控制，可调整大小、位置、边框等；检测浏览器支持需检查pictureInPictureEnabled属性；自定义控制按钮需隐藏默认按钮并用JavaScript实现播放/暂停和关闭功能；处理窗口尺寸变化可用ResizeObserver监听并动态更新样式；显示自定义内容可通过创建浮动层覆盖在画中画窗口上，同步调整其尺寸与位置。
画中画窗口样式主要通过CSS的
::picture-in-picture-window伪类来控制。你可以调整其大小、位置、边框等，让它更符合你的应用场景。
调整画中画窗口样式的关键在于使用 CSS 的
::picture-in-picture-window伪类。
::picture-in-picture-window {
/* 调整画中画窗口的大小 */
width: 320px;
height: 180px;
/* 设置画中画窗口的位置 */
position: absolute;
top: 10px;
right: 10px;
/* 添加边框 */
border: 2px solid red;
/* 设置圆角 */
border-radius: 5px;
/* 其他样式 */
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}如何检测浏览器是否支持画中画 API？
并非所有浏览器都支持画中画 API。在使用前，最好先检测浏览器是否支持该功能，避免出现兼容性问题。你可以通过检查
document对象是否存在
pictureInPictureEnabled属性来判断。如果存在，则说明浏览器支持画中画 API。
if ('pictureInPictureEnabled' in document) {
console.log('浏览器支持画中画 API');
} else {
console.log('浏览器不支持画中画 API');
}如果浏览器不支持，你可以考虑提供降级方案，例如使用全屏模式或在页面中显示视频。
立即学习“前端免费学习笔记（深入）”；
如何自定义画中画窗口的控制按钮？
默认情况下，画中画窗口会显示浏览器提供的控制按钮，例如播放/暂停、关闭等。如果你想自定义这些按钮，可以考虑隐藏默认按钮，然后使用 JavaScript 和 CSS 创建自己的控制按钮。
首先，你需要获取视频元素的引用，并监听画中画模式的变化事件。
const video = document.getElementById('myVideo');
video.addEventListener('enterpictureinpicture', () => {
// 画中画模式已启用
console.log('进入画中画模式');
});
video.addEventListener('leavepictureinpicture', () => {
// 画中画模式已禁用
console.log('退出画中画模式');
});然后，你可以创建自己的控制按钮，并将其添加到页面中。
使用 JavaScript 监听按钮的点击事件，并调用视频元素的相应方法。
const playPauseButton = document.getElementById('playPauseButton');
const closeButton = document.getElementById('closeButton');
playPauseButton.addEventListener('click', () => {
if (video.paused) {
video.play();
} else {
video.pause();
}
});
closeButton.addEventListener('click', async () => {
await document.exitPictureInPicture();
});最后，使用 CSS 隐藏默认的控制按钮。这可能需要一些技巧，因为不同的浏览器实现方式可能不同。一种常见的方法是使用
::cue伪元素来隐藏字幕，并利用这个特性来隐藏控制按钮。但请注意，这种方法可能不是所有浏览器都适用。
如何处理画中画窗口的尺寸变化？
用户可以手动调整画中画窗口的大小，这可能会导致你的自定义样式失效。为了确保画中画窗口始终保持你想要的样式，你需要监听窗口的尺寸变化事件，并动态调整样式。
你可以使用
ResizeObserverAPI 来监听画中画窗口的尺寸变化。
const observer = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
console.log(`画中画窗口大小已更改：width=${width}, height=${height}`);
// 在这里动态调整样式
const pipWindow = document.querySelector('::picture-in-picture-window');
if (pipWindow) {
pipWindow.style.width = width + 'px';
pipWindow.style.height = height + 'px';
}
});
});
// 获取画中画窗口元素 (需要等待画中画模式启用后才能获取)
video.addEventListener('enterpictureinpicture', () => {
const pipWindow = document.querySelector('::picture-in-picture-window');
if (pipWindow) {
observer.observe(pipWindow);
}
});
video.addEventListener('leavepictureinpicture', () => {
observer.disconnect(); // 停止监听
});请注意，你需要等待画中画模式启用后才能获取到
::picture-in-picture-window元素。另外，由于
::picture-in-picture-window是一个伪元素，你可能无法直接对其应用样式。一种解决方法是使用 CSS 变量，然后在 JavaScript 中动态设置这些变量的值。
如何在画中画窗口中显示自定义内容？
除了视频，你还可以在画中画窗口中显示其他内容，例如文本、图像或图表。这可以通过创建一个包含自定义内容的 HTML 元素，然后将其插入到画中画窗口中来实现。
首先，创建一个包含自定义内容的 HTML 元素。
自定义内容
这是一段文本。
@@##@@
然后，使用 JavaScript 将该元素插入到画中画窗口中。这需要在画中画模式启用后进行。由于直接操作
::picture-in-picture-window伪元素比较困难，一种替代方法是创建一个与画中画窗口尺寸相同的浮动层，并将其覆盖在画中画窗口之上。
video.addEventListener('enterpictureinpicture', () => {
const pipWindow = document.querySelector('::picture-in-picture-window');
if (pipWindow) {
const customContent = document.getElementById('customContent');
// 创建一个浮动层
const overlay = document.createElement('div');
overlay.id = 'pipOverlay';
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = pipWindow.offsetWidth + 'px';
overlay.style.height = pipWindow.offsetHeight + 'px';
overlay.style.zIndex = '1000'; // 确保在画中画窗口之上
overlay.appendChild(customContent);
// 将浮动层添加到 body 中
document.body.appendChild(overlay);
// 监听画中画窗口的尺寸变化，并调整浮动层的大小
const observer = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
overlay.style.width = width + 'px';
overlay.style.height = height + 'px';
});
});
observer.observe(pipWindow);
// 在退出画中画模式时移除浮动层
video.addEventListener('leavepictureinpicture', () => {
document.body.removeChild(overlay);
observer.disconnect();
}, { once: true }); // 确保只执行一次
}
});请注意，这种方法可能需要根据不同的浏览器和设备进行调整。另外，你需要确保自定义内容的样式与画中画窗口的样式协调一致。
