Getting raw media ready for the browser

After picking the right tools for media manipulation, the next step is turning a raw camera file into something you can actually serve on the web. This guide walks through that pipeline: converting source footage into formats suitable for mobile playback and producing multiple files so the video runs across browsers.

The goal is to end up with a WebM file for Chrome and an MP4 file for other browsers. Later pages cover the recurring command patterns for conversion and encryption in more detail.

When we talk about serving video in HTML on the major browsers, the two primary delivery methods are Dynamic Adaptive Streaming over HTTP (DASH) and HTTP Live Streaming (HLS). After working through this material, you should be able to produce files that are ready for both.

To follow along, you need a raw video file from a camera, ideally one containing both audio and video tracks. If you don't have one available, you can use this ten-second .mov sample of Munich's Rathaus-Glockenspiel taken at MarienPlatz: glocken.mov.

Continue with the fundamentals of containers and codecs to start the conversion process.