前端实现画中画(Picture-in-Picture，PiP)效果
原生 API 实现
现代浏览器（如 Chrome、Firefox 等）支持原生的画中画 API，你能直接使用 JavaScript 调用该 API 来实现画中画效果。以下是一个简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture-in-Picture Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>
<body class="flex flex-col items-center justify-center h-screen bg-gray-100">
<video id="video" width="640" height="360" controls class="shadow-md rounded-md">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="pipButton" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
Enable Picture-in-Picture
</button>
<script>
const video = document.getElementById('video');
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:', error);
}
});
</script>
</body>
</html>
此示例运用了 HTML5 的 <video> 标签来播放视频，并且借助 JavaScript 调用 requestPictureInPicture() 方法开启画中画模式。
第三方库实现
若你需要更丰富的功能和更好的兼容性，可使用第三方库，像 plyr。plyr 是一个轻量级的 HTML5 视频和音频播放器，它对画中画功能提供了良好的支持。以下是使用 plyr 实现画中画效果的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture-in-Picture with Plyr</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
</head>
<body>
<video id="player" playsinline controls>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<script>
const player = new Plyr('#player');
</script>
</body>
</html>在这个示例中，你只需引入 plyr 的 CSS 和 JavaScript 文件，然后初始化一个 Plyr 实例，plyr 会自动为视频播放器添加画中画按钮。
