HTML如何设置画中画全屏样式？picture-in-picture-fullscreen伪类的作用是什么？

无法直接控制画中画窗口的样式，因为它是浏览器或操作系统管理的独立界面元素，但可通过::picture-in-picture-fullscreen伪类在原始<video>元素同时处于全屏和画中画状态时调整其样式，该伪类仅作用于原始视频元素而非pip窗口本身，开发者应聚焦于通过画中画api管理原始视频的状态与页面布局，而非尝试修改pip窗口的外观，这确保了跨网站的一致性与安全性。

HTML中，我们通常无法直接对画中画（Picture-in-Picture, PiP）模式下的浮动视频窗口进行样式设置。这个浮动窗口是由浏览器或操作系统管理的，目的是提供一致的用户体验和安全性。而你提到的

::picture-in-picture-fullscreen

<video>

当涉及到HTML视频的画中画（PiP）样式控制，我个人觉得，最核心的认知点就是：你几乎不可能直接用CSS去修改那个浮动在屏幕上的小视频窗口的样式。那个窗口是浏览器层面的东西，甚至可以说是操作系统级别的界面元素了。我们作为前端开发者，能做的，更多是围绕着“原始”的

<video>

画中画（PiP）模式下，如何控制或自定义其窗口的样式？

说实话，直接控制画中画窗口的样式，比如它的边框、背景色、播放按钮的风格，这几乎是不可能的事情。浏览器和操作系统为了保持用户体验的一致性，同时也出于安全考虑，严格限制了网页对PiP窗口的访问和样式修改。这就像你不能直接用CSS去修改操作系统的任务栏图标一样，它们是独立的、受系统控制的UI组件。

立即学习“前端免费学习笔记（深入）”；

所以，如果你想让用户看到一个“自定义”的画中画体验，那多半是误解了PiP的初衷。PiP更多的是一种布局上的便利，让视频内容可以脱离原网页的束缚，浮动在其他应用之上。它的样式设计是极简的，由浏览器统一提供，通常只包含播放/暂停、关闭、以及返回原始页面的按钮。这是为了确保无论用户在哪个网站启用PiP，都能获得熟悉且可预测的交互。

理解

::picture-in-picture-fullscreen

登录后复制

伪类：它究竟作用于哪个元素？

这个伪类确实容易让人产生误解，以为它是针对PiP窗口的。但实际上，

::picture-in-picture-fullscreen

<video>

<video>

举个例子，你可能在页面上有一个视频播放器。用户点击了全屏按钮，视频进入全屏。然后，用户又通过浏览器的PiP按钮（或者通过脚本调用

requestPictureInPicture()

::picture-in-picture-fullscreen

<video>

Smart Picture

Smart Picture 智能高效的图片处理工具

40

查看详情

那么，它有什么用呢？你可能想在原视频处于这种“分身”状态时，给它一些特殊的视觉提示，或者干脆隐藏它。比如：

video::picture-in-picture-fullscreen {
  /* 当视频在全屏且画中画同时存在时，让原始全屏视频变得半透明 */
  opacity: 0.5;
  /* 或者，直接隐藏它，因为内容已经在PiP窗口中播放了 */
  /* display: none; */
}

/* 这是一个更常见的用法，当视频进入PiP模式时，改变原始视频的样式 */
video:picture-in-picture {
  /* 当视频进入PiP模式，原始视频在页面上可能会变小或隐藏 */
  width: 100px;
  height: 60px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  /* 当然，这只是个例子，实际可能直接隐藏 */
  /* display: none; */
}

注意上面代码中的

video:picture-in-picture

<video>

::picture-in-picture-fullscreen

除了样式控制，画中画API还有哪些值得关注的交互点？

虽然样式控制受限，但画中画API在交互和状态管理上还是提供了不少有用的接口：

1. 启动与退出:

   • videoElement.requestPictureInPicture()

     登录后复制
     : 这是启动PiP模式的核心方法。它通常需要用户手势（比如点击按钮）才能触发，否则浏览器会拒绝。

   • document.exitPictureInPicture()

     登录后复制
     : 用于程序化地退出PiP模式，将视频返回到其原始位置。

2. 状态查询:

   • document.pictureInPictureEnabled

     登录后复制
     : 一个布尔值，告诉你当前浏览器是否支持PiP功能。在尝试启动PiP之前检查这个，是个好习惯。

   • document.pictureInPictureElement

     登录后复制
     : 如果当前有视频处于PiP模式，这个属性会指向那个

     <video>

     登录后复制
     元素；否则为

     null

     登录后复制
     。

3. 事件监听:

   • videoElement.onenterpictureinpicture

     登录后复制
     或

     videoElement.addEventListener('enterpictureinpicture', ...)

     登录后复制
     : 当视频进入PiP模式时触发。你可以在这里调整页面布局，比如隐藏原始视频播放器，或者显示一个提示信息。

   • videoElement.onleavepictureinpicture

     登录后复制
     或

     videoElement.addEventListener('leavepictureinpicture', ...)

     登录后复制
     : 当视频退出PiP模式时触发。这是恢复页面布局的好时机。

这些API允许你构建更流畅的用户体验。比如，当视频进入PiP时，你可以把原始播放器区域收起来，或者在页面上显示一个“视频正在画中画播放”的提示。当用户关闭PiP窗口时，视频会返回到原位，这时你可以相应地恢复页面布局。整个流程的关键在于管理好原始视频元素在页面上的状态，而不是去“改造”那个由浏览器提供的画中画窗口。

以上就是HTML如何设置画中画全屏样式？picture-in-picture-fullscreen伪类的作用是什么？的详细内容，更多请关注php中文网其它相关文章！