Skip to content

fix: make controlsList and disablePictureInPicture work for HTML video - #2056

Open
ryscript9 wants to merge 2 commits into
cookpete:masterfrom
ryscript9:fix/forward-control-attrs
Open

ryscript9 wants to merge 2 commits into
cookpete:masterfrom
ryscript9:fix/forward-control-attrs

Conversation

@ryscript9

@ryscript9 ryscript9 commented Oct 17, 2026 •

Copy link
Copy Markdown

Fixes #2007

Problem

In v3, hiding the native download, playback-speed, and picture-in-picture controls stopped working.

controlsList and disablePictureInPicture are already valid props, but Player copies an explicit attribute list onto the active player and these two were missing. pip={false} does not hide that button. It requests picture-in-picture mode.

The v2 path broke as well. config.file.attributes is now config.html.attributes, and HtmlPlayer spread that object onto the <video> / <audio> element, which rendered config="[object Object]" instead of applying the attributes.

Changes

  • Forward controlsList and disablePictureInPicture, the same way playsInline and disableRemotePlayback already are.
  • Apply config.html.attributes on the underlying media element. An explicit prop wins, including an explicit false. An omitted prop no longer wipes the same key.
  • Keep the config object itself off the element.
  • Document both props, and the v2 config.file.attributes → config.html.attributes path.
  • Add a "Hide download, speed and PiP" checkbox to the demo.

Video

before/after, 32s

The same <ReactPlayer controls config={{ html: { attributes: { controlsList: "nodownload noplaybackrate", disablePictureInPicture: true } } }} /> on v3.4.0 and on this branch. On v3.4.0 the rendered <video> has no controlsList or disablePictureInPicture, gets config="[object Object]", and the overflow menu (download, playback speed, picture-in-picture) stays. With this PR both attributes are set, the config attribute is gone, and the overflow button disappears.

How I tested it

  • Demo, Chrome. Loaded the mp4 and turned native controls on. Ticking the new "Hide download, speed and PiP" checkbox sets controlsList and disablePictureInPicture on the <video> and removes those overflow menu items. Unticking it removes them again. On v3.4.0 the same checkbox has no effect.
  • Tests through ReactPlayer. The props land on <video>. config.html.attributes lands on <video> and <audio>. config is not a DOM prop. An explicit prop, including false, overrides config. These tests fail on master.
  • Full local suite passed, 0 failed. npm run types and npx biome lint ./src are clean.

On Windows, npm test does not run as-is. The script globs are not expanded by cmd.exe, and echo '{"type": "module"}' writes quotes into disttest/package.json. I ran the same tester files from bash and fixed that file by hand. I left the test script alone because it is unrelated to this PR.

Not in this PR

Restore the ability to hide native download, playback-rate, and
picture-in-picture controls on HTML video sources (fixes cookpete#2007).
These attributes are already typed on ReactPlayer but were omitted
from the explicit prop list in Player.
@ryscript9 ryscript9 changed the title fix: forward controlsList and disablePictureInPicture fix: make controlsList and disablePictureInPicture work for HTML video Oct 19, 2026
@ryscript9
ryscript9 force-pushed the fix/forward-control-attrs branch 2 times, most recently from 2ce42aa to 2d84ee8 Compare October 19, 2026 10:04
HtmlPlayer spread its whole props object onto <video>/<audio>, so
config.html.attributes (the v3 home of v2's config.file.attributes)
rendered as config="[object Object]" instead of applying the attributes.

Spread config.html.attributes onto the element, then the player props
that are defined, so an explicit prop (including false) wins and an
omitted prop no longer clears the config value. Document controlsList,
disablePictureInPicture and config.html, and add a demo checkbox.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Certain controls can no longer be hidden

1 participant