Skip to content
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

Closed
arstrel opened this issue Jul 2, 2020 · 5 comments

Comments

@arstrel
Copy link

arstrel commented Jul 2, 2020

#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

  1. Go to https://cookpete.com/react-player/ or your own implementation of react-player
  2. Use this or any other youtube/twitch url (Have not tested with urls from other content providers)
    https://www.youtube.com/watch?v=kobvF5cs6xY
  3. In Firefox you will see a small blue button at the center of right border of the player that will enable PIP mode. In Chrome
    there is no such button which leads to inability to use pip mode.

Environment

  • URL attempting to play: https://www.youtube.com/watch?v=kobvF5cs6xY
  • Browser: Google Chrome Version 83.0.4103.116 (Official Build) (64-bit)
  • Operating system: MacOS Catalina 10.15.5

Some of my other discoveries that might be useful:

  1. 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.

  2. This is exactly what react-player does

  3. 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.

  4. 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 get false.

  5. From a quick look I think canEnablePip() might be returning false because canPlayFile(url) is false for a regular looking youtube video url string

@cookpete
Copy link
Owner

cookpete commented Jul 2, 2020

Pretty much every player API uses iframes, so supporting PIP will be difficult (due to the SecurityError you mention) until the player APIs somehow provide support for native PIP. Firefox must be being clever and allowing native PIP for <video> elements within iframes.

It's a bit of a tricky one, as the PIP stuff was basically added to the FilePlayer with a view to adding support for other players in the future, which isn't possible yet by the looks of things.

@cookpete
Copy link
Owner

cookpete commented Jul 2, 2020

@arstrel
Copy link
Author

arstrel commented Jul 2, 2020

Hey @cookpete Thanks for the quick reply. 👍
Just so I understand where we stand on this at the moment.

For video files:
We create video element => we have control, so we can call .requestPictureInPicture() on it => pip works => pip prop to ReactPlayer works as expected

For iFramed videos from YouTube and other content providers in a form of url strings
Ultimately, we cannot select the video element in the iFrame. => we cannot call .requestPictureInPicture() on it =>
pip prop to ReactPlayer does nothing.

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 pip prop maybe). I didn't realize that pip prop is mainly for video files now due to something beyond our control.

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 ReactPlayer.canEnablePiP(url) exists but returns false, and finally that it is for a good reason.
Hopefully, we can save someone some effort here 💯

@cookpete
Copy link
Owner

cookpete commented Jul 2, 2020

If this is correct, or if this is at least correct for now - it might be helpful for others to reflect it somewhere in the docs

This is specified in the description of pip in the readme:

Only available when playing file URLs in certain browsers

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.

@arstrel
Copy link
Author

arstrel commented Jul 2, 2020

I meant the fact that to engage in Pip mode we need 2 elements to be present:

  1. Browser should support it (this is reflected with the link to caniuse)
  2. The app should have access to the video element which is only possible really if we are talking about video file and not iFramed youtube/other providers player.
    I meant the fact that it will not work for urls which returns iFrames regardless of the browser really, but due to CORS and security features of iFrame'd content

Otherwise it is like:
Got a proper link - checkmark
Got the proper browser - checkmark
Still does not work, why?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants