HTML5 Video and Audio

Total Duration: 5 Hours
Course level: Beginner to Intermediate
Delivery Method: Instructor Led Classroom Training
Certification: Certificate of Completion will be provided after completing the course

Course Overview

Our HTML5 audio and video course provides hands-on training to teach how to embed media into a web page using HTML5. It shows configuring the HTML5 audio and video tags, encoding, building custom controls. At the end of the course you will complete a project.

Skills Required

This course is ideal for those who already have understanding of Web designing, HTML and CSS. Our Web Design with HTML and CSS covers all of the prerequisites.

Course Dates, Prices & Enrolment

There is no date for this course at this moment. Please complete the BOOKING REQUEST FORM below or come back to this page again later.

Full Course Outline

  1. Audio/video on the web
    • The world of Flash
    • Opera browser, the pioneer of the <video> tag
    • Differences in video players cross-browser
    • HTML5 Audio works like video
  2. Browser support
    • HTML5 Video support
    • HTML5 Audio support
    • Falling back support
  3. Using the Video/audio tags
    • Audio/video tags
    • Using the <source> tags
    • Combating Bugs
  4. Using Video/audio attributes
    • The preload attribute
    • Using metadata or preload
    • The autoplay attribute
    • Looping
    • Adding a manual loop with JavaScript
    • Setting a poster frame
  5. Exercise
    • Create your video/audio container, make it cross browser compatible and add all attributes mentioned in this chapter and make these features also cross browser compatible.
  6. Setting fallback options
    • Falling back to Flash
    • Falling back to download links
    • Using an embed code builder
  7. Encoding
    • Understanding HTML5 video formats
    • MP4 format support
    • Ogg Theora format support
    • WebM format support
    • Reaching your audience
    • Understanding HTML5 audio formats
    • MP3 format support
    • AAC format support
    • Ogg Vorbis format support
    • WAV format support
    • Encoding video/audio
  8. Building your own controls
    • Setting up JavaScript
    • Checking for HTML5 video support
    • Setting up the styles
    • Creating play/pause buttons
    • Creating a play progress bar
    • Creating a load progress bar
    • Creating a Current Time and Duration display
  9. Final Project
    • Use the same theories and create an audio player and create your own play/pause, loading bar, progress bar, and current/duration time controls

Course Tutors

The course instructor is a web developer with a focus in front-end development, digital media design, and networking technologies. She is trained as a Cisco Certified Network Engineer and posseses knowledge in web technologies such as HTML5, CSS3, Javascript, Actionscript, and the Adobe Suite pack.

Newsletter Sign-up

Have a Question?