Course level: Beginner to Intermediate
Total Duration: 8 Hours
Certification: Certificate of Completion will be provided after completing the course

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

Please check back our website again soon for dates or contact us.
  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 Tutor

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?