SSV - Single Standard for Video

The <video> tag opens up a wide range of possibilities for integrating multimedia into web pages. Depending on the task at hand, the approach to its implementation changes dramatically.

In this article, we will examine two basic paradigms: background video without sound and interactive video with controls.

Background video

Background video is used to create a dynamic visual background that should not interfere with the perception of the main content.

The key task is to ensure its smooth, automatic, and silent launch on all devices, including capricious mobile browsers.

To achieve this, a strict set of attributes is used:

• autoplay and muted - required for autoplay. This is especially important in Safari, which blocks any autoplay with sound.
• loop - ensures that the video loops.
• playsinline - critical for iOS so that the video plays on the page rather than in full-screen player mode.

Additional attributes such as disablePictureInPicture and preload=“auto” help to control behavior more precisely and improve the user experience.

Example of background video:

<video 
  autoplay
  muted
  loop
  playsinline
  disablePictureInPicture
  preload="auto"
  poster="preview.jpg"
  aria-hidden=“true”
>
  <source src="bg.webm" type="video/webm">
  <source src="bg.mp4" type="video/mp4">
  <p>
    Your browser does not support video. 
    <a href="bg.mp4">Download video</a>
  </p>
</video>

Interactive video

If video is the main content (educational video, presentation, interview), then control should be completely given to the user.

Here, the controls attributes for displaying the standard player interface and preload=“metadata”, which saves traffic by loading only information about the duration and first frame, come to the fore.

Important limitation: most browsers policies prohibit automatic audio playback!

Audio can only be enabled after an explicit user action (e.g., clicking the play button).

<video
  controls
  preload="metadata"
  poster="preview.jpg"
>
  <source src="content.webm" type="video/webm">
  <source src="content.mp4" type="video/mp4">
</video>

Format selection

Not all video formats are equally well supported by browsers. The strategy is to use two main formats:

1. WebM — a modern format with good compression. Specified first for browsers that understand it (Chrome, Firefox).

2. MP4 (H.264) — a universal “fallback” option with almost 100% support.

The MOV (QuickTime) format should be avoided due to issues with codecs and playback outside the Apple ecosystem.

Don't forget about accessibility

Video content should be accessible to all users, including those who use screen readers or have hearing impairments.

1. Subtitles: A text track, <track>, is a must. This not only helps the hearing impaired, but is also useful when viewing without sound.

   <track 
     kind="captions" 
     src="captions.vtt" 
     srclang="en" 
     label="Subtitles"
     default
   >

2. Description for screen readers: Use ARIA attributes (aria-label, aria-describedby) or a hidden text block to describe the essence of the video for blind users.

3. Fallback content: The text inside the <video> tag will be displayed if the browser does not support the element at all.

Best practices and optimization

• Optimize size: Background videos should not exceed 5 MB. Use compression, reduce duration and frame rate, but don't overdo it.

• Use a poster: The poster=“preview.jpg” attribute sets a fallback image that is displayed before the video loads, improving the user experience and page rendering speed.

• Make videos responsive: You can use CSS to make videos cover an area as a background.

  .bg-video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover; /* Crops the video while maintaining proportions */
    object-position: center;
  }

Safari and mobile browser features

Safari has a strict autoplay policy. Always use the muted + playsinline combination for background videos. If you need autoplay with sound (which is rarely justified), it can only be triggered programmatically in response to user action (click, scroll).

Sometimes, standard controls may not display correctly in Safari. The problem can often be solved with a CSS rule:

video::-webkit-media-controls {
  display: flex !important;
}

Using !important is only justified in the most extreme cases!

Final examples

Background video

<video 
  class="bg-video"
  autoplay
  muted
  loop
  playsinline
  poster="sunset-preview.jpg"
  aria-hidden=“true”
>
  <source src="header-bg.webm" type="video/webm">
  <source src="header-bg.mp4" type="video/mp4">
</video>

Interactive video with subtitles and description

<div class="tutorial">
  <video 
    controls
    preload="metadata"
    aria-label=“Skateboard assembly instructions”
    aria-describedby=“video-description”
  >
    <source src="tutorial.webm" type="video/webm">
    <source src="tutorial.mp4" type="video/mp4">
    <track label="Subtitles" kind="captions" srclang="en" src="tutorial-captions.vtt" default>
    <p>
      Your browser does not support the video element.
      <a href="tutorial.mp4">Download instructions</a>.
    </p>
  </video>
  <p id="video-description" hidden>
    A five-minute video in which our master shows how to assemble a skateboard from ready-made components: trucks, wheels, and decks.
  </p>
</div>