画中画全屏样式设置方法

前往漫画官网入口并下载

HTML中设置画中画（PiP）全屏样式，并非直接修改浮动窗口，而是利用CSS的`::picture-in-picture-fullscreen`伪类。该伪类作用于原始`

无法直接控制画中画窗口的样式，因为它是浏览器或操作系统管理的独立界面元素，但可通过::picture-in-picture-fullscreen伪类在原始

HTML中，我们通常无法直接对画中画（Picture-in-Picture, PiP）模式下的浮动视频窗口进行样式设置。这个浮动窗口是由浏览器或操作系统管理的，目的是提供一致的用户体验和安全性。而你提到的::picture-in-picture-fullscreen伪类，它并不是用来给画中画窗口本身设置样式的，它的作用是针对原始的、在页面上的元素，当这个视频元素同时处于全屏模式且其对应的画中画窗口也正在显示时，允许你对原始视频元素进行样式调整。这通常用于处理原视频在页面上的显示状态，比如当它已经分身出画中画后，你可能想让原视频在全屏状态下有所不同，甚至暂时隐藏。

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

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

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

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

理解::picture-in-picture-fullscreen伪类：它究竟作用于哪个元素？

这个伪类确实容易让人产生误解，以为它是针对PiP窗口的。但实际上，::picture-in-picture-fullscreen伪类是作用于原始的元素的。它的触发条件也比较特殊：当一个元素同时处于全屏模式，并且它也正在播放画中画（PiP）视频时，这个伪类才会生效。

举个例子，你可能在页面上有一个视频播放器。用户点击了全屏按钮，视频进入全屏。然后，用户又通过浏览器的PiP按钮（或者通过脚本调用requestPictureInPicture()）将视频切换到画中画模式。在这种情况下，原始的全屏视频（在全屏模式下）和PiP窗口（浮动在桌面）会同时存在。这时，::picture-in-picture-fullscreen伪类就会作用于那个仍然处于全屏模式的原始元素。

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

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伪类，它更常用，作用于当视频进入PiP模式时，页面上的原始元素。而::picture-in-picture-fullscreen则是在此基础上，额外要求原始视频也处于全屏状态。这确实是一个相对小众但精确的控制点。

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

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

1. 启动与退出:

   • videoElement.requestPictureInPicture(): 这是启动PiP模式的核心方法。它通常需要用户手势（比如点击按钮）才能触发，否则浏览器会拒绝。
   • document.exitPictureInPicture(): 用于程序化地退出PiP模式，将视频返回到其原始位置。

2. 状态查询:

   • document.pictureInPictureEnabled: 一个布尔值，告诉你当前浏览器是否支持PiP功能。在尝试启动PiP之前检查这个，是个好习惯。
   • document.pictureInPictureElement: 如果当前有视频处于PiP模式，这个属性会指向那个元素；否则为null。

3. 事件监听:

   • videoElement.onenterpictureinpicture 或 videoElement.addEventListener('enterpictureinpicture', ...): 当视频进入PiP模式时触发。你可以在这里调整页面布局，比如隐藏原始视频播放器，或者显示一个提示信息。
   • videoElement.onleavepictureinpicture 或 videoElement.addEventListener('leavepictureinpicture', ...): 当视频退出PiP模式时触发。这是恢复页面布局的好时机。

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

今天关于《画中画全屏样式设置方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！