Video
MediaVideo player with themed controls and full keyboard support
Demo
Full player
onTimeUpdate: 0.0s
Minimal chrome
Adaptive streaming (HLS)
An HLS playlist, played with the same controls as a self-hosted file. Safari plays it
natively; elsewhere the player uses hls.js, registered once with setHlsLoader. Quality adapts automatically — this is the only sample here that
needs a network connection.
Cloudflare Stream
cloudflareStream() turns a video id into a playable item, deriving the HLS playlist
and a poster from the Stream URL scheme — no API call needed.
const tour = cloudflareStream('a1b2c3d4e5f6', {
customerCode: 'abc123',
title: 'Product tour',
downloadable: true,
});Resolves to
source https://customer-abc123.cloudflarestream.com/a1b2c3d4e5f6/manifest/video.m3u8
poster https://customer-abc123.cloudflarestream.com/a1b2c3d4e5f6/thumbnails/thumbnail.jpg?time=1s&height=720
download https://customer-abc123.cloudflarestream.com/a1b2c3d4e5f6/downloads/default.mp4
A signed playback token works in place of the video id for private videos. For Cloudflare's
own player instead of these controls, see MediaEmbed with provider="cloudflare".
Keyboard shortcuts
Focus the player and try Space to play, ← / → to seek five seconds, M to mute, C for captions, and F for fullscreen.
Controls hide while playing and reappear on pointer movement, but stay visible whenever the video is paused or focus is inside the player.
Usage
import { Video } from '@classic-homes/theme-svelte';