Support HTML5 Video Attribute disablePictureInPicture

[eek]

Bug Report: disablePictureInPicture for html5 video elements are not supported

Eg:

    <video
    src="https://www.w3schools.com/tags/movie.mp4"
    disablePictureInPicture
    loop
    controls
    controlsList="nodownload"  
    ></video>

What is the current behavior?

Should remove the 3 dots (more button) on videos on Chrome:

What is the expected behavior?

Instead, the attribute is not taken into consideration so the more menu stays:

Example:

https://jsfiddle.net/r1w4x7m0/2/

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All / Latest, Chrome Browsers, All OSes.

Pull request for this issue has also been submitted: #15334

[jgalp]

Is this a valid issue and is anyone working on it? I am a student at the University of Michigan looking to contribute to an open source project for my upper-level software engineering class.

[aweary]

Looking at the W3C specification it doesn't seem like disablePictureInPicture is going to be standardized

This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track.

We typically avoid adding attributes that are not standardized, unless they have widespread browser support. Do you know which browsers support disablePictureInPicture?

[eek]

@aweary - PiP is enabled by default since Chrome 70. Safari also has support but it's not enabled by default yet.

Since Edge also moved to Chromium, probably Edge support as well soon.

Full list here: https://caniuse.com/#feat=picture-in-picture

For desktop usage, it's 62.31% (full support) with 7.97% (for partial support), so total usage is at 70.28%

[JohnDDuncanIII]

Needed to disable the PiP button before going live with a new feature this month, so to work around this issue, I call

this.video.disablePictureInPicture = true

on a ref of the <video> element in componentDidMount. Not the optimal solution, but it works (adding this to the thread for those who are still on older versions of React)

¯\(シ)/¯

https://w3c.github.io/picture-in-picture/#example-add-custom-pip-button

[Divyasam]

adding "disablePictureInPicture controlsList="nodownload" " to video tag removes 3 dots in Full-screen mode