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

答案：通过CSS的::picture-in-picture伪类可设置画中画模式下视频内容的边框、阴影、滤镜等视觉样式，但无法控制窗口大小、位置及原生UI；需结合JavaScript API实现进入/退出画中画并监听状态变化，同时注意浏览器兼容性与用户交互设计。

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

设置HTML画中画（Picture-in-Picture）的样式，主要是通过CSS的

::picture-in-picture

登录后复制

伪类来实现的。这个伪类允许你针对处于画中画模式下的视频元素应用特定的CSS规则，但它并不是用来控制画中画窗口本身的尺寸或位置，而是窗口里那个视频内容的表现形式。

要给画中画设置样式，你需要先有一个支持画中画的

<video>

登录后复制

元素。

<video id="myVideo" src="your-video.mp4" controls></video>

登录后复制

然后，在你的CSS里，使用

::picture-in-picture

登录后复制

伪类。我个人觉得，这个伪类设计得挺巧妙的，它没有直接暴露画中画窗口的操作系统级控制，而是聚焦在内容本身，这其实也符合Web开发的沙盒理念。

/* 当视频进入画中画模式时，应用这些样式 */
video::picture-in-picture {
    border: 3px solid #ff6347; /* 给视频加个醒目的边框，有点橙红色的活力 */
    border-radius: 10px; /* 圆角处理，让画面更柔和 */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); /* 加点青色的发光效果，挺酷的 */
    filter: grayscale(50%); /* 视频灰度化一半，增加一点“特殊模式”的氛围感 */
    transition: all 0.3s ease-in-out; /* 让样式变化更平滑，用户体验会好很多 */
}

/* 也可以结合其他伪类，比如鼠标悬停在画中画窗口上时 */
video::picture-in-picture:hover {
    filter: grayscale(0%); /* 鼠标移上去，视频恢复色彩，感觉更生动 */
    box-shadow: 0 0 25px rgba(0, 255, 255, 1); /* 阴影更明显，提示用户可以交互 */
    transform: scale(1.01); /* 轻微放大，给个小小的反馈 */
}

登录后复制

这段代码会让你的视频在进入画中画模式时，拥有一个橙色的边框、圆角和青色的阴影。当鼠标悬停在画中画窗口上时，阴影会更明显，视频的灰度效果也会消失，并且会有一个轻微的放大效果。这都是针对视频内容本身进行的视觉调整，而不是外部的窗口框架。

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

::picture-in-picture

登录后复制

伪类到底能控制什么？

说到这个伪类，它能控制的范围其实比你想象的要窄，但又比你想象的要有趣。它主要针对的是视频元素在画中画状态下的视觉呈现。你可以调整的CSS属性包括但不限于：

边框（
border
登录后复制
）：给视频内容加个边框，让它在小窗里显得更突出。
阴影（
box-shadow
登录后复制
）：为视频添加阴影，营造深度感或发光效果。
圆角（
border-radius
登录后复制
）：让视频画面边缘变得圆润，有时候这种小细节能提升不少精致感。
透明度（
opacity
登录后复制
）：如果你想让画中画里的视频内容稍微透明一点，这个也能实现。
变换（
transform
登录后复制
）：比如
```
scale
```
登录后复制
（缩放）、
```
rotate
```
登录后复制
（旋转）等，可以给视频内容带来一些动态效果，不过旋转在实际应用中可能比较少见，毕竟用户看视频还是希望能正着看。
滤镜（
filter
登录后复制
）：像
```
grayscale
```
登录后复制
（灰度）、
```
blur
```
登录后复制
（模糊）、
```
brightness
```
登录后复制
（亮度）等，这些滤镜能让画中画的视频有独特的视觉风格，比如我上面例子里用的灰度，就能营造一种“背景播放”的氛围。
背景（
background
登录后复制
）：尽管视频本身是内容，但如果视频有透明区域，或者你想在视频下方设置一个背景色，这个也是可以的。

但需要特别注意的是，这个伪类无法直接控制画中画窗口的：

大小（
width
登录后复制
,
height
登录后复制
）：画中画窗口的大小通常由浏览器根据视频的原始比例和用户设置（如果有的话）自动调整，或者通过JavaScript API来建议，CSS是无能为力的。我第一次接触时，总想去设置
```
width
```
登录后复制
和
```
height
```
登录后复制
，结果发现根本不行，这确实是个常见的误区。
位置（
top
登录后复制
,
left
登录后复制
,
margin
登录后复制
,
padding
登录后复制
）：画中画窗口的位置是由操作系统或浏览器内核控制的，你不能通过CSS来把它固定在屏幕的某个角落。
原生的UI元素：比如关闭按钮、播放/暂停按钮、进度条等，这些都是浏览器提供的原生界面，你无法用CSS去修改它们。

所以，

::picture-in-picture

登录后复制

伪类更像是给视频内容本身穿上了一件特殊的“衣服”，而不是去改造它的“房子”。

为什么我的画中画样式不生效？常见误区与调试技巧

在实际开发中，你可能会遇到CSS样式写了，但画中画出来后却没效果的情况。这确实让人抓狂，但通常都有迹可循。

一个很常见的误区是，你可能忘记了视频必须先进入画中画模式，这个伪类才会生效。它不是一个静态的样式，而是动态地应用于视频处于特定状态时。用户需要点击画中画按钮，或者你的JavaScript代码调用了

videoElement.requestPictureInPicture()

登录后复制

方法，视频才会进入这个模式。如果视频还在普通播放状态，你当然看不到这些样式。

另一个常见问题是浏览器兼容性。尽管主流浏览器对画中画的支持越来越好，但不同的浏览器或版本可能对

::picture-in-picture

登录后复制

伪类支持的CSS属性范围有所差异。有些属性在某个浏览器里可能就是不生效，所以多测试几个浏览器是王道。

Smart Picture

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

查看详情

还有就是CSS属性的限制。就像我前面提到的，你试图去设置一些浏览器不暴露给CSS控制的属性，比如

width

登录后复制

、

height

登录后复制

、

position

登录后复制

等。这些属性在

::picture-in-picture

登录后复制

伪类里是无效的，因为画中画窗口的布局是由浏览器内核和操作系统共同管理的。

调试技巧方面，最直接有效的就是利用浏览器开发者工具。当视频进入画中画模式后，在主页面的开发者工具里找到那个

<video>

登录后复制

元素，你会发现它多了一个

::picture-in-picture

登录后复制

的伪类。你可以直接在样式面板里检查你写的CSS是否被应用了，有没有被其他规则覆盖（虽然伪类的优先级通常很高，但也不是不可能），或者有没有被浏览器标记为无效属性。

如果实在找不出问题，可以尝试简化你的CSS。只保留一个最简单的属性，比如一个

border

登录后复制

，看看它是否生效。如果生效，就逐步添加其他属性，这样能帮你定位是哪个属性出了问题，或者是不是多个属性组合导致了意外。同时，也可以在不同的浏览器上进行测试，对比行为差异，这往往能揭示一些隐藏的兼容性问题。

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

画中画不仅仅是视觉上的小窗口，它背后还有一套相当完善的JavaScript API，让开发者能更好地控制和响应画中画的生命周期。理解这些API，能让你在设计用户体验时有更多可能。

首先是核心的API方法：

```
videoElement.requestPictureInPicture()
```
登录后复制
：这是让视频进入画中画模式的关键。它通常需要由用户手势（比如点击按钮）触发，不能直接在页面加载时就调用，这是出于用户体验和安全考虑。
```
document.exitPictureInPicture()
```
登录后复制
：用于退出画中画模式，让视频回到主页面。

接着是几个事件监听，它们对于同步页面状态和画中画状态非常有用：

```
videoElement.addEventListener('enterpictureinpicture', () => { ... });
```
登录后复制
：当视频进入画中画模式时触发。你可以在这里调整主页面的布局，或者暂停一些不必要的动画。
```
videoElement.addEventListener('leavepictureinpicture', () => { ... });
```
登录后复制
：当视频退出画中画模式时触发。这是一个很好的时机，可以恢复主页面的原始状态。
```
videoElement.addEventListener('resize', (event) => { ... });
```
登录后复制
：这个事件在画中画窗口大小改变时触发，
```
event.width
```
登录后复制
和
```
event.height
```
登录后复制
可以获取到新的尺寸。这在某些需要根据画中画尺寸调整内容比例的场景下非常有用，虽然CSS不能直接控制，但JS可以感知。

还有一些状态和属性：

```
document.pictureInPictureEnabled
```
登录后复制
：一个布尔值，告诉你当前浏览器和设备是否支持画中画功能。在尝试调用
```
requestPictureInPicture()
```
登录后复制
之前，最好先检查这个，避免不必要的错误。
```
videoElement.disablePictureInPicture = true;
```
登录后复制
：如果你不希望某个视频能进入画中画模式，可以设置这个属性。这在一些需要严格控制播放环境的场景下很有用。

从交互层面考虑，画中画的价值在于多任务处理。用户可以在浏览其他内容的同时，不间断地观看视频。作为开发者，我们应该思考：