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

HTML如何设置画中画暂停样式？picture-in-picture-pause伪类的作用是什么？

畫卷琴夢

发布： 2025-08-11 18:02:02

原创

757人浏览过

首先，通过javascript监听视频的pause和play事件动态添加或移除类来实现画中画暂停样式；1. 使用css的::picture-in-picture伪类定义画中画模式下的样式；2. 由于::picture-in-picture-pause兼容性有限，通过javascript为video元素在暂停时添加paused类，播放时移除该类；3. 利用video.paused::picture-in-picture选择器设置暂停时的特定样式，如边框颜色变化；4. 检测浏览器支持情况，通过document.pictureinpictureenabled判断api可用性，并检查video.requestpictureinpicture和document.exitpictureinpicture方法的存在；5. 若不支持可隐藏相关ui或提供替代方案；6. 除边框外，还可修改背景色、透明度、阴影等css属性，但需注意性能与体验；7. 自定义画中画按钮需移除controls属性，创建自定义按钮并通过javascript调用requestpictureinpicture()和exitpictureinpicture()控制模式切换，同时处理异步操作与错误，确保按钮状态与模式同步，最终实现兼容且样式可控的画中画暂停效果。

HTML如何设置画中画暂停样式？picture-in-picture-pause伪类的作用是什么？

HTML设置画中画暂停样式，主要依赖于CSS的

::picture-in-picture

登录后复制

伪类，以及JavaScript对画中画API的控制。

::picture-in-picture

登录后复制

允许你在视频进入画中画模式后，修改视频容器的样式。而

picture-in-picture-pause

登录后复制

伪类（如果浏览器支持，目前支持度有限）本意是在画中画模式暂停时提供特定的样式，但实际应用中可能需要结合JavaScript来实现更可靠的效果。

解决方案：

首先，确保你的HTML包含一个

<video>

登录后复制

元素，并设置了

controls

登录后复制

属性，以便用户可以控制视频播放。

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

<video id="myVideo" width="640" height="360" controls>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

登录后复制

然后，使用CSS来定义画中画模式下的样式。这里，我们主要关注暂停时的样式变化。由于

::picture-in-picture-pause

登录后复制

的兼容性问题，我们可以通过JavaScript监听视频的

pause

登录后复制

事件，并动态添加/移除CSS类。

video::picture-in-picture {
  /* 画中画模式下的通用样式 */
  border: 2px solid red; /* 例如，添加一个红色边框 */
}

video.paused::picture-in-picture {
  /* 视频暂停时画中画模式下的样式 */
  border: 4px solid blue; /* 例如，暂停时边框变为蓝色 */
}

登录后复制

接下来，使用JavaScript来监听视频的

pause

登录后复制

和

play

登录后复制

事件，动态添加或移除

paused

登录后复制

类。

const video = document.getElementById('myVideo');

video.addEventListener('pause', () => {
  video.classList.add('paused');
});

video.addEventListener('play', () => {
  video.classList.remove('paused');
});

登录后复制

这段代码的核心在于，当视频暂停时，我们给

<video>

登录后复制

元素添加一个

paused

登录后复制

类，CSS中针对

video.paused::picture-in-picture

登录后复制

的样式就会生效。当视频播放时，我们移除这个类，样式恢复到默认状态。

如何检测浏览器是否支持画中画API？

可以使用

document.pictureInPictureEnabled

登录后复制

属性来检测。如果该属性返回

true

登录后复制

，则表示浏览器支持画中画API。但更重要的是，需要检查

video.requestPictureInPicture

登录后复制

和

document.exitPictureInPicture

登录后复制

是否存在，因为这是实际控制画中画模式的关键方法。

Smart Picture

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

查看详情

if ('pictureInPictureEnabled' in document) {
  console.log('画中画API可用');
} else {
  console.log('画中画API不可用');
}

if (video.requestPictureInPicture) {
    // 可以使用 requestPictureInPicture
}

if (document.exitPictureInPicture) {
    // 可以使用 exitPictureInPicture
}

登录后复制

如果浏览器不支持画中画API，你可以选择隐藏相关的UI元素，或者提供一个备用方案，比如在一个独立的浮动窗口中播放视频。

除了边框，还能修改画中画模式下的哪些样式？

理论上，你可以修改任何CSS属性，只要它能作用于

<video>

登录后复制

元素或其容器。例如，你可以修改背景颜色、透明度、阴影、甚至是应用一些简单的动画效果。但需要注意的是，过度复杂的样式可能会影响性能，并给用户带来不好的体验。

video::picture-in-picture {
  background-color: rgba(0, 0, 0, 0.5); /* 添加半透明背景 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

登录后复制

需要注意的是，不同浏览器对画中画模式的样式支持程度可能有所不同，因此最好在多个浏览器上进行测试。另外，一些浏览器可能会限制某些样式的修改，以保证用户体验的一致性。

如何自定义画中画按钮，而不是使用浏览器默认的控制栏？

要自定义画中画按钮，你需要隐藏浏览器默认的控制栏（通过移除

<video>

登录后复制

元素的

controls

登录后复制

属性），然后使用JavaScript和HTML创建一个自定义的按钮。

首先，创建一个按钮元素：

<button id="pipButton">进入画中画</button>

登录后复制

然后，使用JavaScript来监听按钮的点击事件，并调用

video.requestPictureInPicture()

登录后复制

方法来进入画中画模式。

const pipButton = document.getElementById('pipButton');

pipButton.addEventListener('click', async () => {
  try {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await video.requestPictureInPicture();
    }
  } catch (error) {
    console.error('进入/退出画中画模式失败：', error);
  }
});

登录后复制

这段代码会检查当前是否已经有元素处于画中画模式。如果有，它会退出画中画模式；否则，它会请求将视频元素置于画中画模式。需要注意的是，