VideoPlayer
A video player with its own chrome.
Walkthrough
1. Basic
Its own chrome, with an MD3 wave across the played half of the seek bar. Everything is bindable, so the page can follow along.
Big Buck Bunny
<script lang="ts"> import { VideoPlayer } from 'omaris'; const SRC = 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_5MB.mp4';</script><div class="w-full max-w-xl"> <VideoPlayer src={SRC} poster="https://picsum.photos/id/1015/1280/720" title="Big Buck Bunny" /></div>2. Chapters and captions
chapters for a clip long enough to skip around in, tracks for one people watch muted or in another language. Both are plain data.
With chapters and captions
<script lang="ts"> import { VideoPlayer } from 'omaris'; const SRC = 'https://test-videos.co.uk/vids/sintel/mp4/h264/720/Sintel_720_10s_1MB.mp4'; const CHAPTERS = [ { time: 0, title: 'Cold open' }, { time: 4, title: 'The pitch' }, { time: 8, title: 'Sign-off' } ]; const TRACKS = [{ src: '/captions-demo.vtt', label: 'English', srclang: 'en', default: true }];</script><div class="w-full max-w-xl"> <VideoPlayer src={SRC} poster="https://picsum.photos/id/1016/1280/720" title="With chapters and captions" chapters={CHAPTERS} tracks={TRACKS} start={4} /></div>