Docs for creating a media button in VJS10

[danrossi]

I was wondering if there is docs on creating a media button to add to the controls. And if there is an api to externally add buttons dynamically to any skin loaded. There doesnt seem to be an api for any of this. There is an exported MediaButtonElement but it's hard to track how its supposed to work as its over engineered and not simple like VJS8 components. It doesn't make any sense. The state stuff doesn't work in iife modules also.

I've had to replicate it more simple using UIElement instead so far but there was a refactored change how the icons is setup so can't afford to keep changing that.

[dgesteves]

What you ended up doing, extending UIElement, is the documented path. There's no API for adding a button to a packaged skin, and MediaButtonElement isn't meant for custom buttons.

• Docs: Build your own UI component. The HTML example is a button built on UIElement, PlayerController and a feature selector, with the ARIA button wiring done by hand.
• MediaButtonElement is the abstract base the built-in buttons share. A subclass has to supply a core, a stateAttrMap, a mediaState controller and activate() (source at 10.2.0). The built-in buttons get those from @videojs/core (for example PlayButtonCore), and the docs don't cover writing one.
• Adding to a skin: Customize skins says packaged skins don't support adding or rearranging controls, and that their internal elements can change between releases. <video-skin> has only three slots: the default one (into <media-container>, over the video), poster and thumbnail (10.2.0 template). So either make your element a child of <video-skin> and position it yourself, or install the skin source with the shadcn CLI and put your element in skin.html next to the built-in buttons.
• Icons: use <media-icon name="..."> and registerIcons from the Icons reference. The packaged skin only registers the icons it uses itself: name="play" rendered inside my custom button, name="chapters" rendered nothing.

The IIFE problem is load order, not IIFE as such. A classic script runs before the deferred module that defines <video-player>, so your element connects first. Its context request never reaches the player, and it never gets state, with no error. Define it after the player:

customElements.whenDefined('video-player').then(() => {
  customElements.define('my-button', MyButtonElement);
});

I reproduced this with @videojs/html 10.2.0. A UIElement + PlayerController(selectPlayback) button bundled as an IIFE and loaded in <head> never got state, and clicking it did nothing. The same bundle with whenDefined got state and its click started playback, and so did loading both as modules.

[sampotts]

Thanks for raising this. A few follow-ups on top of the answer above:

State not arriving in IIFE builds is fixed in @videojs/html@10.3.0 (#9663). A custom element that connects before <video-player> is defined now gets its state once the player connects, so you no longer need the customElements.whenDefined('video-player') workaround after upgrading.

Adding buttons to a skin: we've deliberately not added a way to add controls into the packaged skins. They're meant to be used as they are, and their internal markup can change between releases as we add features or fix bugs. If you need anything beyond what they offer, the solution is to add the skin's source to your project with the shadcn CLI (Customize skins) and put your additional button in skin.html next to the built-in ones. We're adding a section to Build your own UI component that shows how to give it the skin's button styling and tooltip. You can also throw an agent at this to do it for you.

Icons: the skin source registers only the icons its own controls use, in skin.ts. That's why some <media-icon> names render nothing. Register any extra icons there with registerIcons.

MediaButtonElement is the shared base for the built-in buttons and needs a core from @videojs/core, so it isn't meant for custom controls. Extending UIElement with a PlayerController, as you did, is the supported path.