大家好，我是 Immerse，一名獨立開發者、內容創作者。
- 關注公眾號：#沉浸式趣談，獲取最新文章（更多內容只在公眾號更新）
- 個人網站：
https://yaolifeng.com也同步更新。 - 轉載請在文章開頭註明出處和版權信息。
我會在這裏分享關於編程、獨立開發、AI乾貨、開源、個人思考等內容。
如果本文對您有所幫助，歡迎動動小手指一鍵三連(點贊、評論、轉發)，給我一些支持和鼓勵，謝謝！
“畫中畫”（Picture-in-Picture, PiP）説白了，就是讓你能一邊看視頻，一邊幹別的，互不耽誤。就像給你的桌面貼了個能播放視頻的“便利貼”，你可以隨便拖動它，調整大小，它還總在最前面，賊方便。
現在主流的搞法：老朋友 requestPictureInPicture()
其實，想讓 <video> 元素實現畫中畫，現在已經有挺成熟的方法了，那就是直接在視頻元素上調用 requestPictureInPicture() 這個 API。
用起來也挺簡單，基本上就是：
- 先搞個
<video>標籤，放上你的視頻。 - 找個時機（比如用户點個按鈕），用 JavaScript 拿到這個 video 元素，然後調用
video.requestPictureInPicture()。
搞定！
給個簡單的代碼片段：
<video id="myVideo" src="your_video.mp4" controls width="300"></video>
<button id="pipButton">開啓畫中畫</button>
<script>
const video = document.getElementById('myVideo');
const pipButton = document.getElementById('pipButton');
pipButton.addEventListener('click', async () => {
// 先檢查瀏覽器支不支持，是個好習慣
if (document.pictureInPictureEnabled) {
try {
// 如果視頻沒在畫中畫模式，就請求進入
if (document.pictureInPictureElement !== video) {
await video.requestPictureInPicture();
} else {
// 如果已經在畫中畫了，就退出
await document.exitPictureInPicture();
}
} catch (error) {
console.error('操作畫中畫失敗:', error);
}
} else {
console.log('你的瀏覽器不支持畫中畫功能。');
}
});
// 還可以監聽進入和退出的事件，搞點事情
video.addEventListener('enterpictureinpicture', () => {
console.log('進入畫中畫啦！');
pipButton.textContent = '退出畫中畫';
});
video.addEventListener('leavepictureinpicture', () => {
console.log('退出畫中畫了。');
pipButton.textContent = '開啓畫中畫';
});
</script>大部分現代瀏覽器（Chrome, Edge, Firefox, Safari 這些）對這個 API 支持得都還不錯（當然，細節上可能有點小差異，用的時候最好還是查查 MDN 或者 Can I Use）。
那 documentPictureInPicture.requestWindow 是個啥？
window.documentPictureInPicture.requestWindow 更像是個“升級版”或者説“野心更大”的親戚。
requestPictureInPicture() 這個老朋友，它的目標很明確，就是把 <video> 元素 扔進畫中畫窗口。
而 documentPictureInPicture.requestWindow() 這個新來的呢，它的目標是 把任意的 HTML 內容（理論上是這樣的，比如一個 <div>，裏面可以包含視頻、按鈕、文字等等）放進那個懸浮的小窗口裏！
小結一下
- 目前最常用、最穩妥的實現方式是針對
<video>元素的requestPictureInPicture()API。兼容性相對較好，用起來也直接。 - 那個新出的
documentPictureInPicture.requestWindowAPI 呢，目標更宏大，想讓任意 HTML 都能 PiP。
對這個新技術感興趣的朋友，可以去翻翻官方文檔（下面附了鏈接），瞭解下最新進展。
不過動手實踐的話，還是先從老朋友 requestPictureInPicture() 開始吧，至少不會被兼容性搞得頭禿，哈哈。
參考資料放這兒了：
- 關於 Document PiP (新 API): https://developer.chrome.com/docs/web-platform/document-picture-in-picture?hl=zh-cn
- MDN 上的 Document PiP: https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentPictureInPicture
- MDN 上的
requestWindow方法: https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentPictureInPicture/requestWindow - (當然，也別忘了查查
HTMLVideoElement.requestPictureInPicture()這個老朋友的文檔)
其他好文推薦
2025 最新！獨立開發者窮鬼套餐
Windows 安裝 Claude Code 的新姿勢，保姆級教程
最近 Vibe Coding 的實踐經驗分享
分享一款 AI 自動生成流程圖的工具
一個 Cursor mdc 自動生成器，基於 Gemini 2.5，很實用！
這個 361k Star 的項目，一定要收藏！
搞定 XLSX 預覽？別瞎找了，這幾個庫（尤其最後一個）真香！
1分鐘把簡歷變成個人網站！這個免費工具太香了
關於 MCP，這幾個網站你一定要知道！
做 Docx 預覽，一定要做這個神庫！！
【完整彙總】近 5 年 JavaScript 新特性完整總覽
關於 Node，一定要學這個 10+萬 Star 項目！
