How to make Media Session support Document Picture-in-Picture API ?
Introduction
Media Session API 賦予了 web developer 可以直接介入 browser / OS 提供的 media widget 得能力。當頁面中的 video / audio play 時，該 media widget 便會立馬被啟動。
以 Chrome 來說，它帶來了另一個 control panel 控制 video / audio 的便利，尤其在 multi-tab 的狀態下效果更是顯著，因為可以立即進行控制，不需要一個 tab 一個 tab 切換去找當前播放的 video / audio 在哪兒。
透過 Media Session API，我們可以提供更多資訊來豐富它的呈現，比方說 title、artist、album 以及 artwork（縮圖）。而面板亦提供了 play / pause、seek backward 以及 seek forward 等操作。讓 user 可以進行操作。如果 web developer 需要更細緻的操作也可以透過 setActionHandler 來進行事件攔截與監聽。
看看 Media Session 裡頭的 picture-in-picture 行為。一般來說只要 video property disablePictureInPicture 非 true 的狀態下，便可以在 control panel 上看到這個 picture-in-picture 按鈕。點擊後便可以立即將 video 切換到 picture-in-picture 模式。
如上圖所示，picture-in-picture mode 讓 video 可以跨 tab 在最上層顯示，輕鬆達成多工模式，它亦提供了簡單的 video 操作，Picture-in-picture 雖然美好，但總是有些美中不足之處，因為只能針對 video 類型的 element 進行模式切換，也就是說如果有客製化的功能（control panel、彈幕或是 keyboard shortcut）便無法完整攤給 user。
也因此萌生想法，倘若可以攔截 Media Session > button picture-in-picture 點擊，並將它改成 Document Picture-in-Picture 模式，不就可以讓客製化的 video player element 完整功能進行呈現？這也是今天要來跟大家介紹的重點所在～
先準備好 custom video element
如範例所示，我們先準備好 custom video element，並且監聽裡頭 video > play event。
當 video play event fired，便可以透過 navigator.mediaSession.metadata 來進行基本的資訊設置。藉此豐富 media widget 的呈現。
監聽 enterpictureinpicture 事件並進行行為改寫
透過 navigator.mediaSession.setActionHandler 來攔截 enterpictureinpicture 事件，倘若當前瀏覽器支援 Document Picture-in-Picture（row.24）則進行對應設置，反之，則 fallback 回原本 video.requestPictureInPicture（row.34） 的用法。（由於事件已經被我們攔截下來，所以要記得 fallback 回原本的 picture-in-picture 用法，不然會沒有作用）
當 user 點擊 picture-in-picture 按鈕後，便可以在 picture-in-picture 模式下使用完整的 video player 功能了。
Conclusion
透過以上兩步驟，便可以輕輕鬆鬆讓 media widget 也可以支援 Document Picture-in-Picture 功能，可以說是簡單非常，讓使用者體驗瞬間昇華至另一境地～大家也趕緊試試看吧！
希望本篇分享對大家都有所助益～ #MediaSession #picture-in-picture