Play/Pause Button

The <ef-toggle-play> element is a playback control that toggles between play and pause states. It automatically switches between two slots based on the current playing state, allowing you to provide custom UI for each state.

Demonstration

How It Works

The toggle play element:

1. Consumes the playing context from its ancestor (<ef-preview>, <ef-workbench>, or <ef-controls>) or from a targeted element
2. Displays the play slot when paused
3. Displays the pause slot when playing
4. Listens for click events on itself and all children
5. Toggles the playback state when clicked

Any element placed in either slot will trigger the toggle when clicked.

Targeting

Like all control elements, <ef-toggle-play> can target any temporal element on the page using the target attribute:

<ef-preview id="my-video">
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/video.mp4"></ef-video>
  </ef-timegroup>
</ef-preview>

<!-- Control placed outside the preview -->
<ef-toggle-play target="my-video">
  <button slot="play">Play</button>
  <button slot="pause">Pause</button>
</ef-toggle-play>

This allows you to place controls anywhere on the page, not just nested within the element they control.

For more information about targeting and temporal elements, see Understanding Temporal Elements.

Properties

<ef-toggle-play target="my-video">
  <button slot="play">Play</button>
  <button slot="pause">Pause</button>
</ef-toggle-play>

Slots

<ef-toggle-play>
  <button slot="play">
    <svg><!-- play icon --></svg>
    Play Video
  </button>
</ef-toggle-play>

<ef-toggle-play>
  <button slot="pause">
    <svg><!-- pause icon --></svg>
    Pause Video
  </button>
</ef-toggle-play>