CODEWITHSUNDEEP
htmlhtml5-video
Andrew Young
Andrew Young

Reputation: 734

Add a custom control to the controlslist attr in HTML5 video

So I want to add a custom control to the controlsList in the HTML video below. The list pops up when users tap the screen, and I want a custom button on that popped up list. (A custom "save" button). Is this possible? I can't do it separately because I need it to be on the controlList with all the other options. Thank you.

<video
    controls
    controlsList="nodownload noremoteplayback"
    width={sWidth}
    height={sHeight}
    autoPlay={true}
    id={index}
    onEnded={() => this.nextVideo(true)}
    disablePictureInPicture={true}
    preload={"auto"}
    onTouchStart={() => this.pauseVideo(index)}
    muted={true}
  >
  <source
    src={this.state.content[this.state.index]}
    type="video/mp4"
  ></source>
</video>

Upvotes: 2

Views: 11612

Answers (1)

soulshined
soulshined

Reputation: 10622

This attribute isn't really a list of controls to add, it limits what controls are shown when the controls attr is supplied, and the controls attr is a Boolean attr so it's not a list either:

From the living standard of [Last Updated 9 March 2017]

The controlslist attribute, when specified, helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are nodownload, nofullscreen, and noremoteplayback.

ref

The controlslist attr is not mentioned in the 26 November 2019 Living Standard

Futhermore, as it's experimental, the browser support is less than stellar

Even if you set this attribute it's not guaranteed to disable the functionality:

Hiding these aspects of the user agent's own controls does not necessarily disable the related functionality. For example, the user agent might present the same functionality through a context menu or keyboard shortcut.

So based on your question, and that you can not create your own HUD, than no, you can not add custom controls, or use any other value than nodownload, nofullscreen, and noremoteplayback. You are at the browsers discretion of what controls are supported or what options are shown with a contextual menu (although, I am pretty sure all of the desktops have a 'save as' menu item; I know you mentioned 'tap' though)

Upvotes: 2

Related Questions