document-picture-in-picture
document-picture-in-picture copied to clipboard
The background can be set to transparent and mouse-through.
I like the original idea of Document Picture in Picture, as written in explainer:
The website can provide custom controls and inputs (e.g. captions, playlists, time scrubber, liking/disliking videos, etc) to improve the user's PiP video experience.
A very important scenario mentioned here is captions. In many desktop music players (e.g. QQ Music), the function of popping up the lyrics and displaying them on top is provided, which is actually a kind of caption.
In order to meet this kind of demand, there are a few improvements to the current PIP implementation:
- Need to provide a mechanism to hide the title bar, which can be triggered entirely by the user clicking a button on the title bar, and the title bar does not occupy the size of the window itself. See https://github.com/WICG/document-picture-in-picture/issues/32
- The developer could set the x/y coordinates, and a better default position: bottom-centered might be more appropriate. See https://github.com/WICG/document-picture-in-picture/issues/34
Especially in QQ Music provides the following modes, which we can learn from.
- Background Transparency: The background can be made transparent by clicking the button on the title bar. If to avoid abuse, it can be opaque when opened by default.
- When the background is transparent, the mouse can pass through it, which is very important in music apps, and the lyrics should not affect the user's mouse operation.
- The PIP window is globally draggable when the background is transparent because we need somewhere to drag the title bar once it's hidden.
This will also further the Progressive Web App, bringing the great experiences from the Native App to the Web.
The future is bright, and thank you to all those who have worked so hard to bring us the best of the Web.