Media file basics

Media file basics

Appears in: Media

You might think that you can take a video camera and upload it to the web as is. Indeed, video streaming sites such as YouTube or Vimeo let you do this. These sites simplify video processing and uploading for the sake of customer service. Preparing a video for serving from your own site is a bit more complicated.

Video files come in a variety of formats. The format that comes off your camera, typically a .mov file, is good for recording and for editing and other early post-production processes. Its size means it's not good for streaming over the web. Because browsers support different file formats, you'll need to create multiple files. Before converting files you need to understand a few basics about them and about their characteristics.

The file that you see in your operating system shell is a container, identified by a file extension (.mp4, .webm, etc.). The container houses one or more streams. A media file can have any number of streams, of more types than I will go into here.

The sample files used later in this section contain at most two streams: an audio stream and a video stream. Among the other types you might encounter are captions and data, both of which are beyond the scope of this article. There are instances where audio and video streams are dealt with separately. Most files you'll encounter will only contain a single audio stream and a single video stream.

Within the audio and video streams, the actual data is compressed using a codec. A codec, or coder/decoder, is a compression format for video or audio data. The distinction between a container and a codec is important because files with the same container can have their contents encoded with different codecs.

The image below illustrates this structure. On the left is the basic structure. On the right are the specifics of that structure for a single WebM file.

Comparing media file structure with a hypothetical media file.
Parts of a media file.

Not all browsers support up-to-date containers and codecs. For example, WebM is high-quality and open source. Files in WebM packages can be orders of magnitude smaller than other formats, making them a good choice for mobile download. Although WebM was created specifically for the web, its support is not yet universal. Safari in particular does not, as of this writing, support WebM for embedded video.

All modern browsers support MP4 files, making them a good general choice for a media container and the best choice as the backup container for WebM.

Many file formats support multiple codecs for the same container type. A complete list of available video codecs and audio codecs would be a whole website itself. The links just provided are for MDN's practical lists of what's usable on the web. Listed below are the currently preferred file types and the codecs they may use. Follow the links for browser support lists.

File typeVideo CodecAudio Codec
MP4AV1, AVC (H.264)*, VP9aac
WebMAV1, VP9*vorbis, opus

* Indicates the preferred video codec.

Bitrate is the maximum number of bits used to encode one second of a stream. The more bits used to encode a second of stream, the higher the potential detail and fidelity.

Resolution is the amount of information in a single frame of video, given as the number of logical pixels in each dimension. I provide more information about this concept in Resolution.

In Media application basics, I'll show you how to examine these characteristics using two command line tools: Shaka Packager and FFmpeg.

Last updated: Improve article