Player.js: Add hooks for Picture-in-Picture

[beaufortfrancois]

It would be great to support the standardized Picture-in-Picture Web API and exposes some hooks when video enters and leaves Picture-in-Picture.

https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
https://wicg.github.io/picture-in-picture/

[GeoTimber]

Yes I was expecting this soon now from such a paid profesional service as vimeo!

[beaufortfrancois]

@fisherinnovation Are you still working on bringing PiP to vimeo video player?

[fisherinnovation]

@beaufortfrancois We are still working with the new PiP API's to understand the optimal way to implement in the Vimeo Player. Stay tuned for more information.

[mavericken]

Not having this is pretty painful. I am considering self hosting for this reason alone. I see where the hang up is, though, as the current PiP APIs won't let you customize the player when it is popped out. Perhaps an experimental flagged solution of just tossing in a PiP button would make sense for now? You could just let the standard HTML5 player do its thing once it is popped out. When I executed this in the IFrame, it worked absolutely fine: document.getElementsByTagName("video")[0].requestPictureInPicture();
Chrome 70 released this feature into the wild back in October 2018, it is now January 2020.

[alexferl]

@fisherinnovation any news about this?

[luwes]

thanks for the feedback guys, we have the groundwork of this feature ready but we're still tryin to figure out this can best be incorporated in the player UI.

it's possible this will be an API only feature in the beginning.

[luwes]

Thanks for your patience on this one. We released the new API methods and events today which have to be manually enabled with either a pip: 1 option in the Vimeo.Player() constructor or with a URL param pip=1. e.g. https://player.vimeo.com/video/357274789?pip=1

Currently the UI button only shows up on playback because the video metadata is required before requesting PiP but we might change this soon so metadata is loaded on PiP button click if needed.

With this change Safari has PiP disabled by default as well fixing the related issue
https://github.com/vimeo/player.js/issues/642

Please let me know if you have any feedback.

[luwes]

Also check the demo page for use of the API methods and events fired: https://player.vimeo.com/api/demo/357274789