t-video

This component renders a video player that supports lazy loading, placeholder slot, controls, loop, and auto play.

Basic Usage

Click Box to Play

<TVideo
  src="https://example.com/video.mp4"
  width="300"
  height="180" //
/>

t-aspect-ratio, Auto play, and Controls

<TVideo
  src="https://example.com/video.mp4"
  autoplay
  controls //
/>

t-image as Placeholder

<TVideo
  src="https://example.com/video.mp4"
  placeholder={() => <TImage src="https://source.unsplash.com/700x400/?newyork" />}
  controls //
/>

Custom Placeholder and Looping

Play me!

<TVideo
  src="https://example.com/video.mp4"
  placeholder={() => (
    <TFlex direction="col" align="center" justify="center">
      <TIcon icon="mdi:play" mb />
      <TText size="xl">Play me!</TText>
    </TFlex>
  )}
  controls
  loop //
/>

Size, Muted, and Lazy Disabled

<TVideo
  src="https://example.com/video.mp4"
  lazy={false}
  size="xl"
  autoplay
  controls
  muted //
/>

API

No options available

Media

t-image

Media

t-wallpaper

Table of Contents