player.html

// Controlling a player (Vanilla JS)
<media-controller id="player">
  <video
    slot="media"
    src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
    preload="auto"
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-time-range></media-time-range>
    <media-time-display></media-time-display>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

<button id="play-button">Play</button>

<script>
const video = document.querySelector('video');
const playButton = document.querySelector('#play-button');

playButton.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playButton.textContent = 'Pause';
  } else {
    video.pause();
    playButton.textContent = 'Play';
  }
});
</script>