-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pip button does not appear in Chrome/Safari => No way to enable picture-in-picture mode #957
Comments
Pretty much every player API uses iframes, so supporting PIP will be difficult (due to the It's a bit of a tricky one, as the PIP stuff was basically added to the |
More about PIP in firefox: https://hacks.mozilla.org/2020/01/how-we-built-picture-in-picture-in-firefox-desktop/ |
Hey @cookpete Thanks for the quick reply. 👍 For video files: For iFramed videos from YouTube and other content providers in a form of url strings If this is correct, or if this is at least correct for now - it might be helpful to reflect it somewhere in the docs (description to It took me some time to investigate what is happening with my app, then that it is not specific to my app, then that is not specific to YouTube/Chrome/Safari, that blue pip button actually comes from Firefox itself and not react-player, that it is due to iFrame and CORS, that |
This is specified in the description of
https://github.com/CookPete/react-player#props Perhaps it should be made clearer. In the past I have considered building a table of all players and all currently supported features/props. Maybe this would be worth to time to compile. |
I meant the fact that to engage in Pip mode we need 2 elements to be present:
Otherwise it is like: |
#736 ## Current Behavior
When playing youtube video in Chrome through react-player the blue pip button is not shown in a center of right border of the player as it does in firefox. To my understanding there is no other way to enable PIP mode.
Does not work in Chrome v 83
Does not work in Safari v 13.1.1
Works in Firefox v 77.0.1
Expected Behavior
Expect to see PIP button in Chrome/Safari.
Steps to Reproduce
https://cookpete.com/react-player/
or your own implementation of react-playerhttps://www.youtube.com/watch?v=kobvF5cs6xY
there is no such button which leads to inability to use pip mode.
Environment
https://www.youtube.com/watch?v=kobvF5cs6xY
Some of my other discoveries that might be useful:
If you managed to select the video element manually in the browser's console with 'getElementsByTagName' for example and call
vidElem.requestPictureInPicture()
on it, then the pip mode is enabled.This is exactly what react-player does
I have not managed to select the video element from inside of my app due to the fact that the video is inside youtube iFrame document and I'm getting a CORS error that looks like this:
SecurityError: Blocked a frame with origin “http://localhost:3000” from accessing a cross-origin frame.
There is a static method to check if PIP is supported:
ReactPlayer.canEnablePiP(url)
. The docs are unclear about what this url should be exactly but if I pass any youtube url that I can think of, looking like such =>https://www.youtube.com/watch?v=kobvF5cs6xY
as a string to this method I always getfalse
.From a quick look I think canEnablePip() might be returning false because canPlayFile(url) is false for a regular looking youtube video url string
The text was updated successfully, but these errors were encountered: