| Summary: | `webkitSetPresentationMode('picture-in-picture');` (PiP) not working on multiple video sources | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Kurt Zenisek <KZeni1> |
| Component: | Media | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED INVALID | ||
| Severity: | Normal | CC: | bfulgham, eric.carlson, jer.noble, KZeni1, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac | ||
| OS: | macOS 10.12 | ||
Also, it appears that using `document.getElementsByTagName('video')[0].webkitSetPresentationMode('inline');` _works_ on a YouTube video (if you were to make it a PiP via the video element's context menu) whereas `document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture');` does not work (even if you execute this immediately after the inline command worked.)
Finally, it appears that the use of a `javascript:document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture');` bookmarklet does work while running `document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture');` directly from Safari's console does not.
Oddly enough, the use of `document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture');` directly in the console starts working after you have used the `javascript:document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture');` bookmarklet.
Triggering a PiP shouldn't require a bookmarklet or using the context menu of the video element while using the webkitSetPresentationMode('picture-in-picture'); command directly via the browser's JavaScript (be it an extension or via the browser's console) does not work.
I just tested a non-blob URL, and it appears this issue isn't just restricted to `blob:` video sources. Fullscreen and Picture in picture require a user gesture. Commands run from the web inspector don’t simulate a user gesture while running. The user-gesture requirement is removed after entering fullscreen on an element. |
Checking YouTube (which uses blob: for their videos now) shows that you can use `document.getElementsByTagName('video')[0];` in Safari's console on a video player page to obtain the correct video element without issue. However, using `document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture');` at that point returns "undefined" and the video is not turned into a Picture-in-Picture (PiP). Meanwhile right-clicking the YouTube video player (to get the context menu for the video element to show) is able to turn the video into a Picture-in-Picture without issue. I'm guessing there's a bug when it comes to the `webkitSetPresentationMode('picture-in-picture');` command being executed on video elements with a `blob:` url as it's source.