api initiated play prevents requestPictureInPicture. Requires gesture.
In my Vimeo player supported feature. I am working with pro videos with all player controls disabled. This is to provide a chromeless experience to an external player. The player is initiated using the play method. However doing this prevents calls to requestPictureInPicture.
I stuffed around with fiddles and codepens but the basic button clicks won't work. So I put it on my dev host.
Generally with the external player there is an overlay to toggle play, it would be on top of the iframe area.
Click play, then click to request pip.
https://dev.electroteque.org/vimeo/index2.html https://dev.electroteque.org/vimeo/index3.html
Any possible work arounds ? Do I have to play with pointer events block the player ui to capture gestures ?
player.js:10 Uncaught (in promise) DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.
I've just found the possible issue passing through user clicks from the main player. For pro videos with the controls is disabled. It won't capture gestures then and reliant on play methods. If I click the iframe area, then call play pip works. With an overlay over the top it wont capture this click while also calling play. Trying to make a demo for that.
https://dev.electroteque.org/vimeo/index4.html
An official pseudo player function. The player with controls disabled for pro videos isn't getting user clicks when clicking the overlay so pip won't work.
https://dev.electroteque.org/vimeo/index5.html
Some tricks I tried failed. It's not getting user click to the iframe with the layer on top. With controls: 0 it should toggle the player. Then I can temporarily turn pointer-events off on the overlay layer. Only way to get pip working with controls: 0