HTML画中画样式设置与伪类应用详解

想要定制你的HTML画中画窗口？本文为你详解如何使用CSS的`::picture-in-picture-window`伪类进行样式设置，包括调整窗口大小、位置、边框等，打造个性化的视觉体验。同时，文章还深入探讨了如何检测浏览器对画中画API的支持，以及如何自定义控制按钮，摆脱默认样式，实现播放/暂停和关闭等功能。此外，针对窗口尺寸变化，提供了ResizeObserver的解决方案，确保样式动态更新。更进一步，教你如何在画中画窗口中显示自定义内容，通过创建浮动层覆盖，实现更丰富的信息呈现。掌握这些技巧，让你的画中画窗口更具吸引力！

画中画窗口样式通过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>
  <img src="image.png" alt="图像">
</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 }); // 确保只执行一次
  }
});

请注意，这种方法可能需要根据不同的浏览器和设备进行调整。另外，你需要确保自定义内容的样式与画中画窗口的样式协调一致。

本篇关于《HTML画中画样式设置与伪类应用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！