@saekitominaga/customelements-button-media-sameplay

Simultaneous playback button for multiple audio / video.

Simultaneous playback button for multiple audio / video by Custom Elements.

• 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

<button type="button" is="x-media-same-play"
  data-targets-for="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 function automatically sets type="button". However, it is recommended to manually add type="button" for JavaScript disabled environments and browsers that do not support Customized built-in elements (Safari 14, Edge Legacy, etc.). According to the description in the HTML specification, The missing value default and invalid value default are the Submit Button state.

data-targets-for [required]

Multiple media element's ID. (Space delimited)