arnoappenzeller / PiPifier

PiPifier is a native macOS 10.12 Safari extension that lets you use every HTML5 video in Picture in Picture mode
MIT License
761 stars 60 forks source link

Many video sources aren't opening Safari's PiP now (this includes new YouTube, Vimeo, Twitch, Netflix, and others!) #37

Open KZeni opened 7 years ago

KZeni commented 7 years ago

I'm using Safari Technology Preview 29, and it seems Pipifier isn't able to convert YouTube & other video services into a PiP if they're using a blob: URL as the

For example, I can use document.getElementsByTagName('video')[0] to pull the exact YouTube video player element, but then document.getElementsByTagName('video')[0].webkitSetPresentationMode('picture-in-picture'); just returns "undefined" and the PiP isn't triggered. Meanwhile, it appears that you can use the right-click & then right-click again on the YouTube video player to then choose the PiP option from Safari's context menu to have it work just fine.

I'm not sure if this is something WebKit/Safari needs to fix for PiPifier to function or if there's something needing to be updated within PiPifier. I figured I'd mention the issue I came across.

KZeni commented 7 years ago

I have submitted what appears to be a bug with Safari that's causing this here: https://bugs.webkit.org/show_bug.cgi?id=172051

KZeni commented 7 years ago

From my newer comments on the Safari bug tracker:

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.

KZeni commented 7 years ago

Also, it appears this issue isn't just restricted to blob: video sources (I just thought that since that was being used on every site I tested up to this point).

Potential fix for now:

I wonder if making this extension trigger itself as if it were a bookmarklet would be the overall fix until Safari changes this behavior.

arnoappenzeller commented 7 years ago

Hmm not sure how this will affect the final versions of Safari but I will definitely look into this when the new macOS beta is out.

But thank you for filing this odd behaviour (To be honest I haven't used the latest technology preview yet)

AbbyJanke commented 7 years ago

Any update on this? Seems alot of sources aren't working anymore :/

kaishin commented 7 years ago

Noticed the same thing as well with blob: videos.

kaishin commented 7 years ago

@arnoappenzeller Checked on High Sierra and it's exactly the same issue.

arnoappenzeller commented 7 years ago

Can you try to disable the setting for pip button on popular sites and observe if it is still the same? You can still use the PiP button in the Safari toolbar.

As I said I can’t reproduce this atm. My guess is it that something crashes when PiPifier tries to insert the button to those videos players... maybe it’s also memory related 🤔

bgbruno commented 7 years ago

Just let you know FACEBOOK works like a charm. Thank you.