HTML5 Audio and Video
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.
DURING THIS COURSE YOU WILL
- 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.
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
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.