6

I need to hide only one video control from safari browser which is Picture in Picture (PiP). Is there is any solution for that ?

Can we hide this using HTML5?

Blacktempel
  • 3,935
  • 3
  • 29
  • 53
M.Bains
  • 395
  • 1
  • 2
  • 14
  • http://dailymactips.com/how-to-turn-off-picture-in-picture-in-ios/ – Jaromanda X Mar 01 '18 at 04:51
  • and [this](https://stackoverflow.com/questions/39430331/safari-picture-in-picture-custom-html5-video-controller) suggests you have to *enable* it, i.e. default is not enabled - perhaps something in that question will help – Jaromanda X Mar 01 '18 at 04:52
  • @JaromandaX thanks for your quick reply. I already tried this approach but its not working. – M.Bains Mar 01 '18 at 05:00
  • I have to do it in html5 video player via script – M.Bains Mar 01 '18 at 05:14
  • yeah well, as there are literally hundreds of results when searching, and the two I mentioned you claim to have already tried, you'll just have to wait for someone who actually knows :p – Jaromanda X Mar 01 '18 at 05:17
  • I didn't find a way to hide the icon, but you can *block* the feature with `vid.onwebkitpresentationmodechanged = e => {if(vid.webkitPresentationMode === 'picture-in-picture') vid.webkitSetPresentationMode('inline');}`. – Kaiido Mar 01 '18 at 06:03

2 Answers2

7

disablePictureInPicture attribute can be used for that now

<video disablepictureinpicture controlslist="nodownload"></video>

details here: https://wicg.github.io/picture-in-picture/#disable-pip

Andrii Bogachenko
  • 1,225
  • 13
  • 20
3

There doesn't seem to be any official way to do it...

Currently in Safari it's all or nothing (with controls=false).

The shadow-targetting pseudo elements selectors doesn't seem to work on this browser, unlike on Blink browsers, and even though I found references of an ::-webkit-media-controls-picture-in-picture-button on the Internet.

So for today, the only solution is to disable all the default controls of your video element and to build you own controls.
If you wish, you can make it conditional though:

if(typeof vidElem.webkitSupportsPresentationMode === 'function' &&
  vidElem.webkitSupportsPresentationMode('picture-in-picture') ) {
    vidElem.controls = false;
    buildCustomControls(vidElem);
}

For the future, there might a controlsList attribute, which drafts specs currently only handles nodownload, nofullscreen and noremoteplayback, but I can't see why a nopicture-in-picture couldn't make its way there, if this attribute (mainly motivated by Blink browsers, once again) ever gets out of the drafts.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 1
    "@Kaiido thanks for your suggestion. I will talk to my client regarding custom controls, it seems this is only the solution. – M.Bains Mar 05 '18 at 06:02