Actions

VideoPlayer

Native video element with Cinder media controls for play, pause, replay, and seeking.

import { VideoPlayer } from '@lostgradient/cinder';
mediavideo
01

Overview

Reference usage

Native video element with Cinder media controls for play, pause, replay, and seeking.

Usage

svelte 
<script lang="ts">
  import { VideoPlayer } from '@lostgradient/cinder';
</script>

<VideoPlayer
  src="https://example.com/media/intro.mp4"
  label="Product introduction"
  poster="https://example.com/media/intro.jpg"
/>

Guidance

Use When

  • Playing a single video from an https, http, or blob URL with accessible controls.
  • Showing a poster image until the viewer starts playback.

Avoid When

  • You need streaming protocols, caption authoring, or playlists — wire those separately.
  • You only need playback buttons for media you control elsewhere — use media-controls.
Live preview

Basic video player

02

When to use

Use when
  • Playing a single video from an https, http, or blob URL with accessible controls.
  • Showing a poster image until the viewer starts playback.
Avoid when
  • You need streaming protocols, caption authoring, or playlists — wire those separately.
  • You only need playback buttons for media you control elsewhere — use media-controls.
03

Examples

Basic video player

Play, pause, and seek from the media controls. Only https, http, and blob sources load.

Unavailable source

A source whose scheme is not https, http, or blob never loads and renders the unavailable controls.

04

Props

Props for video-player
Name
Type
Default
Description
src required text Media source. Only https:, http:, and blob: URLs load; any other scheme renders the unavailable state.
label required text Accessible name for the player.
poster text Image shown before playback starts.