Removing the controls attribute from a <video> tag removes both video controls and picture-in-picture mode in Safari and Chrome. However, in Firefox, the Picture-In-Picture button is still present. Is it possible to remove/disable or hide it?
This suggests that it is possible (scroll down to Disable PiP section)
This suggests that it is not possible.
Thanks for your help!
It looks like firefox are not using a standard for this but their own events and browser specific elements.
So far I cannot disable it.
I can see its ID’s
pictureInPictureToggleLabelButton and pictureInPictureToggleLabel
But they are not part of the DOM.
Could be shadow dom but I do not know much about that.
Update: yep it looks like it is user agent Shadow Dom which we have no access.
One thing you could do I suppose is to remove the sound track from the video itself and play it separately .
Since it looks like FF will not offer pip if the video has no sound.
The only thing you may run into is how you initially start the video and sound in regards to browsers inhibiting auto play of sound etc.
Could I use javascript to pause and play the audio track just like I use it to play and pause video?
If you use an <audio> element then yes; it uses the same media API as <video> elements. So you can use audioElement.play() and audioElement.pause(). There’s no way to get it 100% in sync with a different video element though.
If you use Hype’s built-in audio support then no, as there currently is not API access (but of course this would be something we would like to add).
Hi Jonathan
Why do you say that there is no 100% chance of syncing the video and audio if they are loaded and played with js at the same time? Can a slower internet connection cause issues?
Looking forward.
Greg
What mechanism are you using to start the video ?
User click/js auto ?
There's a lot of different factors; if one file had to buffer and the other didn't that would definitely be a common reason. There's really no such thing as "at the same time" on computers -- in fact keeping audio and video in sync had been a major research area! I would try to point you to some primers, but google is simply filled with results of people complaining how about audio/video being out of sync :).
As a thought experiment, imagine a pianist, dancer, and a clock. The pianist and dancer are used to playing together. Now separate them and only let them have the clock to go on... they can't always pay exact attention to the clock and will have periods where they get ahead/behind and then also make decisions independently on how to deal with it. Even simple things like saying "go" are going to be different... maybe the pianist is already setup but the dancer needs to inhale first, so they even start out at different times! That's basically the situation separated audio/video is in.
I was planning to use js triggered by a button click.