Component

Video

Published on

Description

The Video component renders the browser's native <video controls> player. There is no custom JavaScript player, so play, pause, seek, volume, captions and fullscreen all work with the keyboard and assistive technology the browser already supports.

Pass one src or a list of sources (each { src, type }), plus a tracks list. At least one track of kind captions or subtitles is required, and kind defaults to captions. Add a caption to wrap the video in a <figure>, and a transcript snippet to show the full text in a <details> disclosure.

Video never autoplays. preload defaults to metadata, so only the duration and dimensions load until the user presses play. Set preload="none" for pages with many videos.

Example

Open in new tab
View HTML markup 
<figure><video controls="" preload="metadata" poster="/video/test-pattern.jpg" width="320" height="180">
    <source src="/video/test-pattern.webm" type="video/webm" />
    <source src="/video/test-pattern.mp4" type="video/mp4" />
    <track kind="captions" src="/video/test-pattern.en.vtt" srclang="en" label="English"   />
  </video>
  <figcaption>Test pattern with a steady tone</figcaption>
  <details>
    <summary>Transcript</summary>
    <p>A three second colour test pattern with a moving counter. A steady 440 hertz tone plays throughout. No speech.</p>
  </details>
</figure>

Accessibility

  • Captions are required: the component throws when no captions or subtitles track is given (WCAG 1.2.2, 1.2.4)
  • The transcript in a native <details> gives a text alternative for all audio and visual content (WCAG 1.2.8)
  • No autoplay, so audio never starts without a user action (WCAG 1.4.2) and nothing moves on load (WCAG 2.2.2)
  • Native controls are keyboard operable and expose their names and states to screen readers
  • Write your own captions. Don't rely on auto-generated captions or transcripts

Audio

For audio-only content, use the audio and source elements from @willfarrell-ds/svelte/elements/. It also renders native controls with no autoplay and preload="none". Put a transcript next to the player (WCAG 1.2.1).

<Audio>
  <Source src="/audio/episode.opus" type="audio/ogg; codecs=opus" />
  <Source src="/audio/episode.m4a" type="audio/mp4" />
</Audio>

References

  • Details: the disclosure used for the transcript

Variables

None