HTML如何设置画中画按钮样式？picture-in-picture-button伪类的用法是什么？

/* 改变画中画按钮的背景颜色 */
video::-webkit-media-controls-enclosure::picture-in-picture-button {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

video::--internal-media-controls-overlay-cast-button {
  display: none;
}

/* 改变画中画按钮的图标颜色 */
video::-webkit-media-controls-enclosure::picture-in-picture-button::after {
  color: white; /* 白色图标 */
}

/* 添加鼠标悬停效果 */
video::-webkit-media-controls-enclosure::picture-in-picture-button:hover {
  transform: scale(1.1); /* 稍微放大 */
  transition: transform 0.2s ease-in-out; /* 平滑过渡 */
}

document.pictureInPictureEnabled

true

if (document.pictureInPictureEnabled) {
  console.log("画中画模式可用");
  // 进一步处理，例如显示画中画按钮
} else {
  console.log("画中画模式不可用");
  // 隐藏画中画按钮或者给出提示
}

video

requestPictureInPicture()

exitPictureInPicture()

const video = document.querySelector('video');

video.addEventListener('click', async () => {
  try {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await video.requestPictureInPicture();
    }
  } catch (error) {
    console.error('画中画模式失败', error);
  }
});

document

leavepictureinpicture

document.addEventListener('enterpictureinpicture', (event) => {
  const pictureInPictureWindow = event.pictureInPictureWindow;

  // 监听画中画窗口大小改变事件
  pictureInPictureWindow.addEventListener('resize', (event) => {
    console.log('画中画窗口大小改变', pictureInPictureWindow.width, pictureInPictureWindow.height);
    // 根据新的大小调整视频内容或者UI
  });
});

document.addEventListener('leavepictureinpicture', (event) => {
  console.log('退出画中画模式');
  // 恢复之前的视频状态或者UI
});

PictureInPictureWindow

resize