首先，通过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设置画中画暂停样式，主要依赖于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是否存在，因为这是实际控制画中画模式的关键方法。
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);
}
});这段代码会检查当前是否已经有元素处于画中画模式。如果有，它会退出画中画模式；否则，它会请求将视频元素置于画中画模式。需要注意的是，
requestPictureInPicture()方法返回一个Promise，因此我们需要使用
async和
await来处理异步操作。同时，需要处理可能出现的错误，比如用户拒绝进入画中画模式。
自定义按钮的样式可以随意设置，使其与你的网站风格保持一致。你还可以根据画中画模式的状态，动态修改按钮的文本或图标，以提供更好的用户反馈。
