Embedding videos within a site creates more lively and informative pages that are more attractive to visitors. Similar to serving images, serving video raises concerns on the impact to users due to the higher bandwidth requirements as well as the less accessible nature of the medium.

Choosing a 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 numbers of users can stream them.

Videos typically contain multiple items: the collection of images that is the video, the audio accompanying those images, and 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 wide spread use. For video codecs there are two main options: H.264 for if support is of the upmost concern and AV1 for streaming the absolute smallest files at a given quality.

In summary there are two main media stacks:

| Container Format | Video Codec | Audio Codec | Use Case | |

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn HTML on Codecademy