Proposed demo: Picture-in-Picture API #36
Replies: 2 comments
-
It seems like Chrome are developing a similar Document Picture-in-Picture API specification which builds on the existing PiP API to allow developers to add interactive controls in the PiP video window. More info here on the developer.chrome.com website The fundamental issue we would have for streaming a canvas element via a hidden video element into a PiP window is tracking mouse/touch events on the window itself. There doesn't seem to be a way to attach an event listener to the PiP window which would allow us to track mouse/touch events on/across the PiP window. Thus there's no way to translate those events back to the canvas to allow user interaction with it. DPiP would seem to allow user-generated events. The developer site has some working examples - the video.js example is impressive! Sadly there's no indication about how interested other browsers would be in supporting the new DPiP API. Given that the original PiP API was developed as an MVP, and that spec is explicit about future iterations widening the API to include targets beyond the HTML |
Beta Was this translation helpful? Give feedback.
-
Decision For the moment, mark as Won't Fix. But keep an eye on how things in this space develop! |
Beta Was this translation helpful? Give feedback.
-
Proposal:
The Picture-in-Picture API allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.
Given that I can see use cases where giving the end user the ability to "pop out" a canvas-based display which they can view while continuing to browse the web page, it seems like it would be an interesting piece of work to build out a demo which captures a canvas output as a media stream and feeds it into a video element used by the PiP API.
If we can pick up user interactions with the PiP video display (eg mouse position/clicks) and feed them back to the canvas then this functionality becomes even more exciting - canvas-based interactive animations or even mini-applications (eg: mini-spreadsheets?)
Risks:
The API is not currently supported by Firefox-based browsers
Beta Was this translation helpful? Give feedback.
All reactions