Something you need to know about Document Picture-in-Picture

Paul Li
5 min readFeb 29, 2024
Document Picture-in-Picture, Chrome for developers. https://developer.chrome.com/docs/web-platform/document-picture-in-picture/

Introduction

對於 picture-in-picture 帶來的效果,相信大家都不陌生。它豐富了 video 的瀏覽體驗,讓 video:picture-picture 可以跨 tab 於最上層顯示,對於影片或是會議進行都能多工進行~

不過很可惜的該 Web API僅僅支援 <video />,也就是說 developers 客製化的 control panel 或是其他附加功能均無法直接在 picture-in-picture window 中搬移過去,可謂是最大的遺憾~

也因為該功能的限縮,間接觸成了 Document Picture-in-Picture 的誕生,這個 Web API 讓任何 HTML element 都可以直接進入 picture-in-picture 的模式,以 YouTube 來說,便可以將整個 YT player 直接進入 picture-in-picture 模式,更繼承與保留了原來的操作體驗,讓 picture-in-picture 中的 player 更加完善。

YouTube & Document Picture-in-Picture.

對這個 Web API 有興趣的朋友,不妨點擊上方技術文件,一覽如何實作?筆者非常喜愛這項功能亦將之包裝成 Web component — <msc-any-pip />,方便快速導入到服務當中。

今天要跟大家分享使用 Document Picture-in-Picture 幾個容易被忽略的要點,讓大夥兒們可以無礙愉悅的來使用它。

1. 最佳化 CSS 樣式呈現

隨著 CSS Nesting 技術補及,相信越來越多的朋友開始導入 CSS Nesting,並且依照 module 來巢狀封裝樣式。

不過實際上 Document Picture-in-Picture 的實作基本上是把 target element 黏貼到另一個 document.body 下,所以當僅針對 [class=my-document-pip-target] 進行 Document Picture-in-Picture 化,就有機會造成樣式丟失(範例的中的 button 以及 progress 的屬性都是有相依性,一但單獨抽離就有出現不預期的樣式錯誤)。

所以最佳作法就是把當前的所有 CSS 都 clone 一份並黏貼到 Picture-in-Picture Window (以下簡寫為 pip window)中的 document 中,inline style 中的 style clone 亦需要注意斷行符號的保留,避免樣式 parsing 錯誤。

此外,我們也可以藉由這樣的特性來客製化 pip window 裡頭的樣式。

2. 保留元件當前狀態

靜態的資料如圖片、文字的描述原件可以無礙的直接黏貼到 pip window,但如果是動態內容,比方說播放中的 <video />、<audio /> ,倒數計時、完成度等資訊呈現,carousel 當前輪播頁碼 … etc。就需要特別注意於不同 document 間的往返要讓他們狀態維持一致,如此才能維持既有的瀏覽體驗避免造成使用者徬徨、錯愕。

電子型錄的呈現 keep 當前播放頁碼. https://blog.lalacube.com/mei/webComponent_msc-ez-catalog.html

3. 無法呼叫 Fullscreen

Document Picture-in-Picture 會把 pip window 中的 element.requestFullscreen disable,也就是說於 pip window 中的原件事無法直接轉換成 fullscreen 模式。所以在 JavaScript 的撰寫上最好用 try / catch 針對 requestFullscreen 進行包覆,避免污染了 thread process。

Conclusion

以上便是幾個操作 Document Picture-in-Picture 需要注意的幾個小技巧,希望這些實作經驗可以有效地幫助到大家,讓大夥們可以更輕易的入門 Document Picture-in-Picture。

感謝大家的閱讀,希望本篇能確切的幫助到大家~ #picture-in-picture

Reference

--

--

Paul Li

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.