Video Element with Captions

<video
    controls
    width="800"
    height="450"
    poster="/videos/demo-poster.jpg"
    preload="metadata">

    <!-- Browser picks the first format it can play -->
    <source src="/videos/demo.webm" type="video/webm">
    <source src="/videos/demo.mp4"  type="video/mp4">

    <!-- Captions / subtitles -->
    <track kind="captions" srclang="en" src="/videos/demo.en.vtt" label="English" default>
    <track kind="captions" srclang="es" src="/videos/demo.es.vtt" label="Español">
    <track kind="descriptions" srclang="en" src="/videos/demo.desc.vtt" label="Audio description">

    <!-- Fallback for ancient browsers -->
    <p>Your browser doesn't support HTML5 video. <a href="/videos/demo.mp4">Download the video</a> instead.</p>
</video>

<!-- Common attributes you'll want:
     autoplay muted   — required combo for autoplay on mobile (Chrome/Safari policy)
     loop             — restart on end
     playsinline      — inline playback on iOS (default is fullscreen)
     preload="none"   — don't fetch anything until user hits play -->