Media Element

Installation

npx shadcn add @limeplay/media

Setup the provider in the root

components/player/media-player.tsx

import { Media } from "@/components/limeplay/media"

// ... other imports

export function MediaPlayer() {
  return (
    <MediaProvider>
      <PlayerHooks />
      <Suspense>
        <Layout.RootContainer height={720} width={1280}>
          <Media
            as="video"
            autoPlay={true}
            className="size-full object-cover"
            muted
          />
        </Layout.RootContainer>
      </Suspense>
    </MediaProvider>
  )
}

Understanding

Native HTML Media Element component that provides audio and video playback capabilities. It supports both video and audio elements via the as prop.

Components

Media

The main component that renders either a <video> or <audio> element based on the as prop.

API Reference

Prop

Type