@w0s/button-media-same-play

Simultaneous playback button for multiple audio / video

• If you press the button during pause, the playback starts from the position with the lowest playback time.
• Pause if you press a button during playback.
• If all the target media elements has finished playing, start playing from the beginning.

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/button-media-same-play": "..."
    }
  }
</script>
<script type="module">
  import ButtonMediaSamePlay from '@w0s/button-media-same-play';

  for (const targetElement of document.querySelectorAll('.js-button-media-same-play')) {
    new ButtonMediaSamePlay(targetElement);
  }
</script>

<button type="button" class="js-button-media-same-play"
  aria-controls="video1 video2"
>Simultaneous playback</button>

<video src="video.webm" controls="" id="video1"></video>
<video src="video.webm" controls="" id="video2"></video>

Attributes

type [optional]

This attribute is not required, but it is recommended to include type="button". According to the description in the HTML specification, The missing value default and invalid value default are the Submit Button state.

aria-controls [required]

Space separated list of one or more ID values referencing the media elements being controlled. See the aria-controls attribute of WAI-ARIA for details.