Embedding videos within a site creates lively and informative pages that are attractive to visitors. Similar to serving images, serving videos raise concerns about the impact on users due to greater bandwidth requirements as well as the less accessible nature of the medium.
Video Codec and Format
Unless videos are preloaded or set to automatically play, their impact on page speed should be minimal. However, attention should be paid to video file sizes to guarantee that the greatest number of users can stream them.
Videos typically contain multiple items:
- The collection of images that is the video.
- The audio accompanying those images.
- Any number of subtitles or captions.
Therefore, there is a distinction between the format of the codec used to encode each of these individual items as well as the format of the container meant to package it all together. Container and codec support is browser dependent, with the latest generation of codecs attempting to provide even better video compression with less quality loss.
MP4 is not only the most widely supported container format, but also supports the largest number of codecs, so it is the default option for containers. The situation for audio codecs is similar, with
AAC being the default due to its good compression and widespread use. For video codecs, there are two main options or media stacks:
|Container Format||Video Codec||Audio Codec||Use Case|
|MP4||H.264||AAC||Compatible with most every browser and used if support is of the utmost concern.|
|MP4||AV1||AAC||Useed for streaming the absolute smallest files at a given quality. Better compression with better quality, but less compatible.|
Inserting a Video
A video is inserted onto a page through opening and closing
<video> tags. Self-closing
<source> tags are nested inside the
<video attribute1 attribute2... poster=""> <source type="video/mp4" src="filename1.filetype" /> <source type="video/mp4" src="filename2.filetype" /> ... <a href="">Some text</a> </video>
<video controls autoplay loop poster="spooky_ghost.jpg"><source type="video/mp4" src="spooky_ghost.mp4" />Sorry, your browser doesn't support this video. Click<a href="spooky_ghost.mp4">here</a> to download it instead.</video>
- Provides a thumbnail for the video with
- Declares the source file for the video,
spooky_ghost.mp4, and its MIME (Multipurpose Internet Mail Extensions) or media type,
- Provides a fallback text that allows the user to download the video instead.
To modify the original example to support the
AV1 video codec and fallback to the
H.264 video codec:
<video controls autoplay loop poster="spooky_ghost.jpg"><source type="video/mp4" src="spooky_ghost_av1.mp4" /><source type="video/mp4" src="spooky_ghost_h264.mp4" />Sorry, your browser doesn't support this video. Click<a href="spooky_ghost_h264.mp4">here</a> to download it instead.</video>
Accessibility with Videos
It is generally discouraged to use videos as the background for a webpage. In many cases, a static image should be considered instead to avoid any potential issues caused by moving images as well as to better support users with screen readers. However, if a video must be used as a background, a few key steps should be taken to best support the most users:
- If the video is purely decorative,
aria-hidden="true"can denote to screen readers that the video provides no additional context or content and is purely decorative.
prefers-reduced-motionCSS media query can be used to disable auto-playing videos for certain users.
To convey the same content to users who are not able to view videos, provide either sufficient captions or aria descriptions for the video.
Captions can be added as a child of the
<video> element using the
<track> tag with the following key attributes:
kindto describe the text track. Here it is a
caption, but it can also be
labelis how this option is represented in the user interface.
srclangrepresents the language for the caption.
srcis the actual location of the caption track. Text tracks such as subtitles and captions use the
WebVTTformat as indicated by the
<video controls poster="spooky_ghost.jpg"><source type="video/mp4" src="spooky_ghost_av1.mp4" /><source type="video/mp4" src="spooky_ghost_h264.mp4" /><trackkind="caption"label="English"srclang="en"src="spooky_ghost-en.vtt"/><trackkind="caption"label="Español"srclang="es"src="spooky_ghost-es.vtt"/>Sorry, your browser doesn't support this video. Click<a href="spooky_ghost_h264.mp4">here</a> to download it instead.</video>
- garanews209 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- christian.dinh2481 total contributions
- JeremyBarbosa18 total contributions