liveBook · Manning

Container

As explained in Web Design Playground

A file format that packages media streams and associated metadata into a single media file structure.

A media container is like a zip file for video or audio: it packages the media streams, their codecs, and related metadata into one file structure. section 6.25

Keep these two layers separate:

  • The container organizes multiple pieces of a media file. section 6.25
  • A codec encodes, compresses, decodes, and decompresses the video or audio inside the container. section 6.25
  • Metadata travels alongside the media and codecs within the container. section 6.25

Embedding a media file

When an HTML5 page uses the video or audio element, the embedded file arrives in a particular format with a particular container and supported codecs. There is no single universal web-media format, so compatibility involves more than choosing a file extension. section 6.25

Web layouts use the same word differently: a CSS container can center content, limit it to 800 pixels, and clear floated elements. That layout meaning is separate from media packaging. section 10.40 section 10.39

How Web Design Playground covers it

How deep it goes
Defines containers, codecs, and metadata, then explains their relationship without detailing particular formats or compression algorithms.
Examples
Uses a zip-file analogy and HTML5 video or audio embedding to make media packaging tangible.
What it assumes
Builds the distinction from zero by defining containers and codecs before discussing embedded web media.
What you can do after
Evaluate how a web media file packages codecs and metadata before embedding it in a page.
How it connects
Connects containers with media streams, codecs, metadata, video, audio, and media formats.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.