Media on the web: what matters for users

People expect media—especially video—to be a smooth, instant part of their browsing experience. On mobile devices in particular, video is often a more convenient way to absorb information than reading text. For that to work, the media must not demand more bandwidth than the user has available, must play on whatever device it's viewed on, and must never make the user wait. Nothing ruins an experience like pressing play and getting nothing.

If you've consumed video on your own device, you already know what good media playback feels like. The job now is to make that experience work on your own site, where technical decisions must always serve the user experience first.

Meeting the technical bar

Before you can deliver a good media experience, your files need to satisfy a few technical requirements:

  • Media files use common web-friendly formats that contain both audio and video streams.
  • Resolution is appropriate for the devices your users are on.
  • Bitrate doesn't overload your users' network bandwidth.
  • The result plays in all major browsers using appropriate technologies.
  • The file is encrypted, if you need that (optional).

Don't worry if those concepts sound abstract right now. They'll be explained progressively, starting with the basics of how media works, moving on to adding media to a page, and finishing with practical, advanced applications.

Four ways to put video on your site

There are four main approaches for displaying video:

  • Upload to a hosting provider like YouTube or Vimeo and embed their player.
  • Self-host basic embedding using the HTML <video> and <audio> elements.
  • Use a full-featured video library such as Shaka Player, JW Player, or Video.js.
  • Build and run your own media server and streaming application.

This site focuses mostly on the basics of embedding media, but also covers advanced topics to get you started toward building your own streaming application. That effort is not trivial, so there's a reference Media PWA with offline support that demonstrates both the techniques involved and the level of effort required. It's not a production-ready offering or a competitor to YouTube or Vimeo, but it does give you a starting point for learning something challenging.

To be clear: building a competitor to hosted media services would require a team of expert engineers and thousands of hours of work. Unless your goal is to enter that market, you're better off with one of the other options. Still, understanding the underlying technology is valuable. Experimenting with browser support at the cutting edge—or at least using an existing video library—has real utility.

What you'll learn

The media collection is organized into three parts. The first covers foundational concepts you need before adding media to your site: how media files are structured, the applications you'll need to prepare files for the web, and streaming concepts. The second explains how to prepare and convert files into various formats, optionally adding encryption. The final part shows how to embed media in a web page, discusses autoplay best practices, using media frameworks, taking videos offline, and making video accessible.

There's a lot of ground to cover, starting with media file basics.