W3C logo

HTML5 Audio and Video

audio/video banner

Objective of the course

The objective of this course is to make students familiar enough with HTML5 media so that they can use and manipulate it in their Web pages and applications.


  • Learn about the current state of HTML5 audio and video
  • How to integrate HTML5 media into their Web pages
  • How to encode media to make it suitable for the Web
  • How to build and customize their own media players
  • How to integrate HTML5 media with other HTML5 elements
  • How to use HTML5 media in games and other richer experiences
  • Learn about the integration with mobile platforms

All course material is presented in English. Assignments must also be submitted in English. Participants may post messages to the discussion forum in any language.

Course description

Using HTML5, CSS and JavaScript, students will learn as they build increasingly comprehensive media players and solutions. By learning about the underlying technology, the aim is that the student will understand the full potential of the media, the tools and the tricks of the trade. Armed with this sound knowledge of HTML5 audio and video and its potential, students will be able to confidently create cross-browser HTML5 based audio/video solutions.

Each week ends with a practical assignement.

Week 1 - Introduction to HTML5 media

We look at the back-story of media on the Web and where we are and then launch into creating our very own media player using HTML5. We’ll start with the basics and take you the various capabilities of the and tags and the API, while keeping a firm grasp of the pragmatic issues that a developer will need to tackle to create cross browser solutions.

Week 1 assignment: “Creating your first basic audio and video player”

Week 2 - Tools of the trade

HTML5 media must be correctly encoded to ensure maximum compatibility throughout the various target platforms. We explore the various tools and services available to encode and host our media and then delve deeper into the extensive HTML5 media API to take our player to the next level.

Week 2 assignment: “Encode your own media”

Week 3 - Media player controls

We take a look at the various controls and feedback that we need to create to provide a comprehensive media player and explore the mechanisms that lie behind them.

Week 3 assignment: “Add a functional progress bar to your audio and video players”

Week 4 - Playlists

One of the most desired functions for audio and sometimes video players is the ability to have playlists. Playlists allow you to order a number of pieces of media for sequential playback.

Week 4 assignement: “Add a playlist to your audio player and add subtitles to your video player”

Week 5 - Integrating video with other HTML5 elements

One of the great advantages of HTML5 media is that it can interact with other HTML elements, we can have a lot of fun with this.

Week 5 assignement: “Integrate canvas or WebGL with video, and create audio spot effects”

Samples of students’ work (coming soon)

All material, including that produced by participants, in assignments and correspondence is copyrighted property and cannot be copied, duplicated, posted on another Web site, or otherwise used without the original author’s consent.