画中画窗口样式通过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('退出画中画模式'); });
然后，你可以创建自己的控制按钮，并将其添加到页面中。
<div id="customControls"> <button id="playPauseButton">播放/暂停</button> <button id="closeButton">关闭</button> </div>
使用 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
伪元素来隐藏字幕，并利用这个特性来隐藏控制按钮。但请注意，这种方法可能不是所有浏览器都适用。
如何处理画中画窗口的尺寸变化？
用户可以手动调整画中画窗口的大小，这可能会导致你的自定义样式失效。为了确保画中画窗口始终保持你想要的样式，你需要监听窗口的尺寸变化事件，并动态调整样式。
你可以使用
ResizeObserver
API 来监听画中画窗口的尺寸变化。
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 元素。
<div id="customContent"> <h1>自定义内容</h1> <p>这是一段文本。</p> @@##@@ </div>
然后，使用 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 }); // 确保只执行一次 } });
请注意，这种方法可能需要根据不同的浏览器和设备进行调整。另外，你需要确保自定义内容的样式与画中画窗口的样式协调一致。
