createPlayer

<demo-video-player class="html-create-player-basic">
    <video
        src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
        autoplay
        muted
        playsinline
    ></video>
    <demo-play-toggle class="html-create-player-basic__button">
        <span class="show-when-paused">Play</span>
        <span class="show-when-playing">Pause</span>
    </demo-play-toggle>
</demo-video-player>

.html-create-player-basic {
  position: relative;
}

.html-create-player-basic video {
  width: 100%;
}

.html-create-player-basic__button {
  padding-block: 8px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  color: black;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  padding-inline: 20px;
  cursor: pointer;
}

.html-create-player-basic__button .show-when-paused {
  display: none;
}

.html-create-player-basic__button .show-when-playing {
  display: none;
}

.html-create-player-basic__button[data-paused] .show-when-paused {
  display: inline;
}

.html-create-player-basic__button:not([data-paused]) .show-when-playing {
  display: inline;
}

import {
  applyElementProps,
  applyStateDataAttrs,
  createButton,
  createPlayer,
  features,
  MediaElement,
  selectPlayback,
} from '@videojs/html';

const { PlayerElement, PlayerController, context } = createPlayer({
  features: [...features.video],
});

class VideoPlayer extends PlayerElement {
  static readonly tagName = 'demo-video-player';
}

class PlayToggle extends MediaElement {
  static readonly tagName = 'demo-play-toggle';

  readonly #player = new PlayerController(this, context, selectPlayback);

  #disconnect: AbortController | null = null;

  override connectedCallback(): void {
    super.connectedCallback();
    this.#disconnect = new AbortController();

    const buttonProps = createButton({
      onActivate: () => {
        const state = this.#player.value;
        if (!state) return;
        state.paused ? state.play() : state.pause();
      },
      isDisabled: () => !this.#player.value,
    });

    applyElementProps(this, buttonProps, this.#disconnect.signal);
  }

  override disconnectedCallback(): void {
    super.disconnectedCallback();
    this.#disconnect?.abort();
    this.#disconnect = null;
  }

  protected override update(): void {
    super.update();
    const state = this.#player.value;
    if (!state) return;
    applyStateDataAttrs(this, state, { paused: 'data-paused', ended: 'data-ended' });
  }
}

customElements.define(VideoPlayer.tagName, VideoPlayer);
customElements.define(PlayToggle.tagName, PlayToggle);