Add media to a web page

Embedding video: the essentials

Adding video to a web page is straightforward with the <video> and <source> elements. Before you begin, make sure your media file is actually ready for web delivery. A raw .mov file straight off a camera won't work; you'll need to prepare and encode it for web use first.

Core topics

• Using <video> and <source>: Learn the specific syntax and attributes for embedding a media file directly into your page.
• Media accessibility: Add captions to your videos to make them usable for viewers who are hearing-impaired.
• Media frameworks: Get an overview of popular tools like Shaka Player, JW Player, and Video.js for more advanced media handling.
• Fast playback with preload: Accelerate media startup by actively preloading resources before the user hits play.
• PWA with offline streaming: See how an updated demo PWA achieves adaptive streaming and offline playback without relying on third-party frameworks, complete with accessible source code.

These topics cover the full range of media integration, from basic embedding to advanced accessibility and performance optimization.