Preview

The <ef-preview> is a custom HTML element that hide our editor UI and display the preview of the video.

Basic Usage

<ef-preview>
        <ef-timegroup
          mode="sequence"
          class="w-[500px] h-[500px] bg-black relative overflow-hidden"
        >
          <ef-timegroup
            mode="contain"
            class="flex items-center flex-col justify-center"
          >
            <ef-video
              src="/assets/video.mp4"
              class="w-full h-full"
            ></ef-video>
          </ef-timegroup>
        </ef-timegroup>
</ef-preview>

How it works

In the example above, the ef-preview element is used to hide our editor UI and display the preview of the video.

We have ef-toggle-loop and ef-toggle-play elements to toggle the loop and play state of the video respectively.

Advanced Usage

<ef-preview>
  <div>
    <ef-toggle-loop>
        <button>Loop</button>
    </ef-toggle-loop>
    <ef-toggle-play>
        <div slot="pause">Pause</div>
        <div slot="play">Play</div>
    </ef-toggle-play>
        <ef-timegroup
          mode="sequence"
          class="w-[500px] h-[500px] bg-black relative overflow-hidden"
        >
          <ef-timegroup
            mode="contain"
            class="flex items-center flex-col justify-center"
          >
            <ef-video
              src="/assets/video.mp4"
              class="w-full h-full"
            ></ef-video>
          </ef-timegroup>
        </ef-timegroup>
        </div>
</ef-preview>