BestHub
Sign in
Tag

Document Picture-in-Picture

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 15, 2025 · Frontend Development

Document Picture-in-Picture API: Full Tutorial and Implementation Guide

This article provides a comprehensive tutorial on the Document Picture-in-Picture (PiP) API, covering its purpose, browser support checks, window creation, style synchronization, event handling, cloning techniques, and a complete example with HTML, CSS, and JavaScript code.

Document Picture-in-PictureWeb APIfrontend
0 likes · 11 min read
Document Picture-in-Picture API: Full Tutorial and Implementation Guide
Bilibili Tech
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-PictureFrontend Development
0 likes · 31 min read
Implementing a Cross-Page Playback Queue with Document Picture-in-Picture