HTML如何设置画中画等待样式？picture-in-picture-waiting伪类的作用是什么？-html教程-PHP中文网

HTML如何设置画中画等待样式？picture-in-picture-waiting伪类的作用是什么？

煙雲

发布： 2025-08-18 22:34:01

原创

1013人浏览过

通过::picture-in-picture-waiting伪类为视频元素在进入画中画前的等待状态设置样式，如虚线边框和透明度变化，以提供视觉反馈；该伪类作用于原始video元素，与::picture-in-picture区分，后者用于已进入画中画状态时的样式；目前主要在Chromium内核浏览器支持，需注意兼容性并采用渐进增强策略。

html如何设置画中画等待样式？picture-in-picture-waiting伪类的作用是什么？

HTML中设置画中画等待样式，主要是通过CSS的

::picture-in-picture-waiting

登录后复制

伪类来实现的。这个伪类的作用，简而言之，就是允许你为视频元素在进入画中画模式前的“准备”或“等待”状态提供特定的视觉反馈。它不是用来控制画中画窗口本身，而是作用于原始的

video

登录后复制

元素，当它正在准备被移入画中画时。

解决方案

要为HTML视频元素设置画中画等待样式，你需要利用

::picture-in-picture-waiting

登录后复制

这个CSS伪类。这通常意味着当用户触发画中画功能，但浏览器还没有完全将视频内容渲染到独立的画中画窗口之前，你可以对原始的

video

登录后复制

元素应用样式。

<video id="myVideo" controls src="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

登录后复制

？

这两个伪类，从名字上看很像，但它们作用的时间点和目的完全不同，理解它们各自的生命周期非常关键。

Smart Picture

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

查看详情

```
::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伪类。