Add built-in Picture-in-Picture button

[beaufortfrancois]

Description

Following #5824 (comment), this PR adds support for a built-in Picture-in-Picture button in the control bar. This API is described in the spec and article

Specific Changes proposed

This PR is about a new PictureInPictureTogggle component in the controls bar of the player. It depends on videojs/font#41 for icons.

Requirements Checklist

• Feature implemented / Bug fixed [Support for picture-in-picture API #5824]
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

Note that I'm creating this PR on top of #6001. You may want to look only at 75de129 and a2012c2

[gkatsev]

videojs-font@3.2.0 is now out with the pip icons

[gkatsev]

Also, I assume this would be rebased once #6001 is in?

[gkatsev]

I'd expect the fullscreen toggle to still be the right-most button, so, this would have to go above it.
I'm still a bit concerned on whether this can have issues, particularly in ad-plugins that often create their own control bar if it's included by default.

[beaufortfrancois]

Fullscreen toggle button is now the right-most button. I've updated screenshot as well.

[beaufortfrancois]

Also, I assume this would be rebased once #6001 is in?

Yes @gkatsev

[gkatsev]

Thanks!

[beaufortfrancois]

@gkatsev I've rebased this PR. What else is left?

[gkatsev]

I've tried it with ad plugins, it fails as expected but it'll be handled elsewhere. Merging. Thanks so much @beaufortfrancois!

[sobralik]

Is there a way to not include the button on player setup?
Similar to data-setup='{ "bigPlayButton" : false }'

[gkatsev]

@stafio you can! The following should do it:

{
  controlBar: { 
    'pictureInPictureToggle': false
  }
}

[sobralik]

That did it. Thanks @gkatsev!

[ckybonist]

BTW, This option should be added into @types/video.js, currently the definition is:

interface ControlBarOptions extends ComponentOptions {
		volumePanel?: VolumePanelOptions;
		fullscreenToggle?: boolean;
	}

[surikat1978]

Hi!
Please tell me how to disable this button in new versions of the player ?
What is the point of integrating, which not everyone needs and even interferes with another.

[gkatsev]

How to disable it is posted here #6002 (comment)
This is a user-focused feature that we decided is beneficial and thus we have it enabled by default.

[surikat1978]

How to disable it is posted here #6002 (comment)
This is a user-focused feature that we decided is beneficial and thus we have it enabled by default.

Thanks! But it is not clear in which file and line to change this. min.js or min.css ?

[mister-ben]

It's a setup option. How you use it depends on how you initiatalise the player:

videojs('my_player', {controlBar: {pictureInPictureToggle: false}});

data-setup='{"controlBar": {"pictureInPictureToggle": false}}'

[surikat1978]

How to disable it is posted here #6002 (comment)
This is a user-focused feature that we decided is beneficial and thus we have it enabled by default.

If broadcast video with subtitles, in this case, this function is useless. Of course, can kill it using the data setup. But it would be more correct to make a version with and without a button.

[surikat1978]

It's a setup option. How you use it depends on how you initiatalise the player:

videojs('my_player', {controlBar: {pictureInPictureToggle: false}});

data-setup='{"controlBar": {"pictureInPictureToggle": false}}'

Thanks very much!