Bilibili Tech
Aug 30, 2024 · Frontend Development
Implementing a Cross-Page Playback Queue with Document Picture-in-Picture
The article explains how Bilibili leveraged Chrome’s Document Picture‑in‑Picture API to create a cross‑page playback queue displayed in a small always‑on‑top window, detailing style synchronization, independent lifecycle handling via a helper class, and real‑time updates using BroadcastChannel‑plus‑iframe messaging while relying solely on native web features.
Cross-Page PlaybackDocument Picture-in-PictureJavaScript
0 likes · 31 min read