VideoPlayer

Molecule

Custom HTML5 video player. Quality, subtitle, audio track, and playback rate selection; custom WebVTT subtitle overlay; auto-hiding controls; programmatic API. Keyboard shortcuts: Space/K=play, ←→=±10s, ↑↓=volume, M=mute, F=fullscreen.

Preview

Placeholder Video — Full Features Demo

0:00/0:00

Son callback: —

Code

<VideoPlayer
  src="video.mp4"
  poster="poster.jpg"
  title="Video Title"
  qualities={[
    { label: '1080p HD', value: '1080' },
    { label: '720p',     value: '720'  },
    { label: 'Auto',     value: 'auto' },
  ]}
  subtitles={[
    { label: 'English', srclang: 'en', src: 'en.vtt' },
    { label: 'Türkçe',  srclang: 'tr', src: 'tr.vtt' },
  ]}
  audioTracks={[
    { label: 'English', language: 'en' },
    { label: 'Türkçe',  language: 'tr' },
  ]}
  onQualityChange={(v) => console.log(v)}
  onAudioTrackChange={(i) => console.log(i)}
/>

Preview

Placeholder Video — Subtitle Demo

0:00/0:00

Code

<VideoPlayer
  src="video.mp4"
  poster="poster.jpg"
  title="Elephants Dream"
  subtitles={[
    { label: 'English', srclang: 'en', src: 'en.vtt' },
    { label: 'Türkçe',  srclang: 'tr', src: 'tr.vtt' },
  ]}
/>

Preview

0:00/0:00

Code

<VideoPlayer src="video.mp4" poster="poster.jpg" />

VideoPlayer

Full featured (kalite + altyazı + dil)

Subtitle + Font Boyutu

Minimal (sadece oynatma hızı)