Video.js: How to enable picture in picture mode for safari?

Created on 12 Jun 2017 · 8Comments · Source: videojs/video.js

I want to enable picture in picture placeholder for video for IOS devices.
I have tried this code

$("video").webkitSetPresentationMode("picture-in-picture");

This works on plan simple html5 player but it is not working with videojs.
I have tried to trigger code with fullscreen button but still not working.

This is demo code,

Steps to reproduce

Play video on Iphone or Ipad.
Go full screen and click picture in picture button ( beside exit fullscreen button)
it wont fill video spot on webpage with place holder.

Results

Expected

when I play video in (picture in picture) mode there should be placeholder on video's original location.
pip

Actual

Video tag location is not showing anything at all.

Additional Information

what browser are affected?
Safari 10 +

what platforms (operating systems and devices) are affected?
IOS

Source

sohrabzia

Most helpful comment

Your example won't work for a few reasons. You're using jQuery without having the jQuery library loaded, and trying to go to picture in picture too early - Safari will only allow PIP mode after the video has started.

You need to call webkitSetPresentationMode() on the tech el - the video element after the player has initialised, e.g.

  player.one('playing', function() {
    var techEl = player.tech(true).el();
    if (techEl.webkitSupportsPresentationMode && typeof techEl.webkitSetPresentationMode === "function") {
      techEl.webkitSetPresentationMode('picture-in-picture')
    }
  });

example

mister-ben on 10 Jul 2017

👍2 🎉1

All 8 comments

Safari triggers a webkitbeginfullscreen event when it enters pip mode, which caused us to add fullscreen styling to the inline placeholder. Those styles prevent the placeholder being visible. This is fixed is 6.2.1

mister-ben on 28 Jun 2017

👍1

Hi, thanks for the response. Is there any way i can get 6.2.1 js and css file without getting uncompiled files ? like minified just two files (js and css), I have search all over but all cdn, codepen or demo includes older version. Thanks,

sohrabzia on 3 Jul 2017

Looks like the 6.2.1 zip didn't get uploaded to github releases properly. Just updated it. https://github.com/videojs/video.js/releases/tag/v6.2.1

gkatsev on 3 Jul 2017

Thanks gkatsev 👍

sohrabzia on 3 Jul 2017

@sohrabzia does everything work now? If so, can you close this issue. Thanks!

gkatsev on 5 Jul 2017

sorry for the late response, I have tried v6.2.1 but it doesnt seem to be working. here is Demo

edit: link updated

sohrabzia on 5 Jul 2017

You need to call webkitSetPresentationMode() on the tech el - the video element after the player has initialised, e.g.

  player.one('playing', function() {
    var techEl = player.tech(true).el();
    if (techEl.webkitSupportsPresentationMode && typeof techEl.webkitSetPresentationMode === "function") {
      techEl.webkitSetPresentationMode('picture-in-picture')
    }
  });

example

mister-ben on 10 Jul 2017

👍2 🎉1

I guess this is different from the Picture-in-Picture API (https://googlechrome.github.io/samples/picture-in-picture/) that is available since Chrome 70+. Can this be supported? New ticket?