答案：HTML视频画中画功能依赖Picture-in-Picture API，需先检测支持性，再通过requestPictureInPicture()启动，exitPictureInPicture()退出，并监听状态变化更新UI，绑定按钮实现交互，注意浏览器兼容与跨域限制。
HTML视频实现画中画（Picture-in-Picture）功能，主要依赖浏览器提供的 WebAPI —— Picture-in-Picture API。该功能允许用户将视频以小窗口形式悬浮在桌面其他应用之上，提升观看体验。现代主流浏览器（如 Chrome、Edge、Firefox）已支持此功能。
1. 检测是否支持画中画
在调用画中画功能前，建议先检测当前浏览器是否支持：
const video = document.querySelector('video');
if ('pictureInPictureEnabled' in document) {
console.log('画中画功能可用');
} else {
console.log('当前浏览器不支持画中画');
}
2. 启动画中画模式
通过调用视频元素的 requestPictureInPicture() 方法可进入画中画模式：
async function openPiP() {
try {
await video.requestPictureInPicture();
} catch (err) {
console.error('进入画中画失败:', err);
}
}
可以绑定到按钮点击事件：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('pip-btn').addEventListener('click', openPiP);
3. 退出画中画
使用 exitPictureInPicture() 方法退出：
async function exitPiP() {
try {
await document.exitPictureInPicture();
} catch (err) {
console.error('退出画中画失败:', err);
}
}
4. 监听画中画状态变化
通过监听 enterpictureinpicture 和 leavepictureinpicture 事件，可实时掌握状态：
video.addEventListener('enterpictureinpicture', () => {
console.log('已进入画中画模式');
});
video.addEventListener('leavepictureinpicture', () => {
console.log('已退出画中画模式');
});
比如可根据状态动态更新按钮文字或图标。
5. 完整示例代码
基本上就这些。只要视频元素合法且用户有交互行为（如点击按钮），就能顺利启用画中画功能。注意：部分浏览器要求视频具备一定尺寸或来自同源资源，跨域视频可能受限。
