通过::picture-in-picture-waiting伪类为视频元素在进入画中画前的等待状态设置样式，如虚线边框和透明度变化，以提供视觉反馈；该伪类作用于原始video元素，与::picture-in-picture区分，后者用于已进入画中画状态时的样式；目前主要在Chromium内核浏览器支持，需注意兼容性并采用渐进增强策略。
HTML中设置画中画等待样式，主要是通过CSS的
::picture-in-picture-waiting
伪类来实现的。这个伪类的作用，简而言之，就是允许你为视频元素在进入画中画模式前的“准备”或“等待”状态提供特定的视觉反馈。它不是用来控制画中画窗口本身，而是作用于原始的
video
元素，当它正在准备被移入画中画时。
解决方案
要为HTML视频元素设置画中画等待样式，你需要利用
::picture-in-picture-waiting
这个CSS伪类。这通常意味着当用户触发画中画功能，但浏览器还没有完全将视频内容渲染到独立的画中画窗口之前，你可以对原始的
video
元素应用样式。
<video id="myVideo" controls src="https://www.php.cn/faq/your-video-source.mp4"></video>
/* 当视频正在准备进入画中画模式时 */
#myVideo::picture-in-picture-waiting {
border: 3px dashed #ff9800; /* 示例：添加一个虚线边框 */
opacity: 0.7; /* 示例：稍微降低透明度 */
transition: all 0.3s ease-in-out; /* 示例：平滑过渡效果 */
/* 也可以显示一个加载指示器，但通常需要配合JavaScript动态添加元素 */
}
/* 当视频已经进入画中画模式时，这会作用于原始页面上的视频元素 */
#myVideo::picture-in-picture {
opacity: 0.3; /* 示例：让原始视频变得半透明 */
pointer-events: none; /* 示例：禁用原始视频的交互 */
}
这段CSS代码会告诉浏览器，当
#myVideo
元素处于画中画的“等待”状态时，给它一个橙色的虚线边框，并让它稍微透明一点。这能给用户一个直观的提示，表明操作正在进行中，而不是页面卡住了。
::picture-in-picture-waiting
伪类在实际应用中的场景有哪些？
说实话，这个伪类的应用场景其实蛮具体的，主要就是为了优化用户体验，尤其是在用户发起画中画请求到实际画中画窗口出现之间那短暂的、有时甚至是肉眼不可察觉的瞬间。我个人觉得，它最实用的地方在于提供一个“正在处理”的视觉信号。
立即学习“前端免费学习笔记（深入）”；
比如，你可以：
- 加载指示器： 在视频元素上叠加一个旋转的加载图标或文本，告诉用户“正在准备画中画窗口”。这比直接跳转要友好得多。虽然纯CSS可能难以实现复杂的加载动画，但简单的背景色变化或边框动画还是可以的。
- 状态反馈： 改变视频元素的边框颜色、背景色或者添加一个半透明的蒙层，暗示这个视频即将“离开”当前页面，进入独立窗口。这有点像一个“预告”，让用户知道他们的点击是有响应的。
-
视觉过渡： 配合CSS的
transition
属性，可以让视频元素在进入等待状态时有一个平滑的动画效果，比如逐渐变暗或缩小一点，然后再进入画中画。这样整个过程会显得更加流畅，不那么突兀。
-
禁用交互： 在等待期间，你可能希望用户不要再对原始视频进行操作，这时可以设置
pointer-events: none;
，防止误触。
我觉得，这些细节虽然小，但对提升用户感知的流畅度和专业性非常有帮助。用户看到一个即时反馈，会觉得你的应用更“活生生”。
如何区分
::picture-in-picture
和
::picture-in-picture-waiting
？
这两个伪类，从名字上看很像，但它们作用的时间点和目的完全不同，理解它们各自的生命周期非常关键。
-
::picture-in-picture-waiting
：
- 作用时机：当视频元素被请求进入画中画模式，但浏览器尚未完成画中画窗口的创建和内容渲染时。这是一个短暂的、过渡性的状态。你可以把它想象成视频在“准备行李”阶段。
- 目的：主要用于提供用户反馈，表明画中画操作正在进行中，避免用户误以为没有响应。它作用于原始页面上的视频元素。
-
::picture-in-picture
：
- 作用时机：当视频元素已经成功进入画中画模式之后。
- 目的：用于样式化原始页面上的视频元素，当它的内容被复制到独立的画中画窗口时。此时，原始页面的视频元素通常会变得不那么重要，或者你希望它以某种方式“淡出”背景。
-
重要提示：这个伪类不作用于画中画窗口本身。画中画窗口是一个由操作系统或浏览器独立管理的UI，开发者无法直接通过CSS来样式化它。
::picture-in-picture
伪类仍然作用于你HTML文档中的那个
video
标签。
简单来说，
waiting
是在“即将进入”的状态，而没有
waiting
的那个，则是在“已经进入”的状态。我经常会把它们俩搞混，但只要记住
waiting
是针对那个“准备过程”，而另一个是针对“已经完成但原始元素还在”的状态，就清晰多了。
浏览器兼容性与未来发展：使用
::picture-in-picture-waiting
需要注意什么？
关于浏览器兼容性，这是我们前端开发者永远绕不开的话题。
::picture-in-picture-waiting
这个伪类，坦白讲，它的支持度目前还不如
::picture-in-picture
那么广泛。
根据我了解到的情况，
::picture-in-picture-waiting
的支持情况：
- Chrome/Edge/Opera 等基于 Chromium 内核的浏览器通常支持得比较好。
- Firefox 和 Safari 对这个伪类的支持可能还在发展中，或者不如 Chromium 系那么完善。有时候，你可能需要查阅最新的MDN文档或者Can I use网站来获取最准确的兼容性信息。
使用时需要注意：
-
渐进增强： 由于兼容性可能不一致，我建议将其作为一种“渐进增强”的特性来使用。这意味着即使浏览器不支持
::picture-in-picture-waiting
，你的画中画功能也应该能正常工作，只是用户可能看不到那个“等待”的视觉反馈。不要让核心功能依赖于这个伪类。
- 测试： 在不同浏览器和操作系统上进行充分测试是必不可少的。你可能会发现某些浏览器在特定情况下表现不一致。
-
替代方案： 如果你对“等待”状态的反馈要求很高，并且需要更广泛的兼容性，你可能需要考虑结合JavaScript来手动控制一个加载动画或蒙层。比如，在调用
requestPictureInPicture()
方法之前，显示一个
div
作为加载指示器，然后在
pictureinpicturechange
事件触发后隐藏它。
-
API结合：
::picture-in-picture-waiting
是Picture-in-Picture Web API的一部分，它与
video.requestPictureInPicture()
、
document.exitPictureInPicture()
以及相关的事件（如
enterpictureinpicture
、
leavepictureinpicture
）协同工作。理解整个API的生命周期，能帮助你更好地利用这些CSS伪类。
总的来说，这是一个很酷的小特性，能让用户体验更上一层楼，但在实际项目中，还是要考虑到它的兼容性，并做好备用方案。
暂无评论内容