HTML5 Video/Audio

1-day Web Design Course in HTML5 Video & Audio — HTML5-03

HTML5 Video TrainingCourse Overview

A web media training course which introduces the purpose, syntax and usage of the HTML5 video and HTML audio tags

HTML5 Video TrainingCourse Contents

Web Audio and Video Basics

  • Historic problems with web multimedia
    • The generic problem of MIME type support
    • Reliance on plugins
    • Non-standard <embed> vs. standard <object>
    • Competing proprietary codecs
    • Media players ignoring standard control parameters
    • Accessibility — incl. mouse-only controls
  • The new HTML5 video and audio markup
    • How it resolves historic problems
    • Issues left open, e.g. DRM
  • HTML5 audio and video support in current browsers
    • Gecko — Firefox, et al.
    • Trident — Internet Explorer, et al.
    • Webkit — Chrome, Chromium, Safari, et al.
    • Presto — Opera
    • KHTML — Konqueror, et al.
    • Text-only browsers and Assistive Technology (AT)
  • Understanding the conflict over video and audio formats
    • Packaging vs. encoding (codecs)
    • Patented vs. patent-free codecs
    • ‘Free-to-use’ — for viewers vs. producers & distributors
  • Configuring web servers to deliver HTML5 media
    • HTTP headers
    • Streaming

Embedding Video and Audio in Web Pages

  • Using video and audio tags
  • Browser compatibility — using multiple formats
  • Preloading media content
  • Autoplaying video and audio
  • Looping video and audio
  • Provifing a preview frame (poster frame)
  • Setting video dimensions — width and height
  • Accessibility and internationalisation — Subtitles and captions

Fallback Methods for Playing Media in Older Browsers

  • Using Flash — as a fallback
  • Providing download links — as a fallback
  • embed code builders

Encoding and Packaging Audio and Video

  • Understanding HTML5 video package formats and codecs
  • Understanding HTML5 audio package formats and codecs
  • Using HandBrake to create MP4-packaged and H.264-encoded video
  • Using Firefogg to package and encode Theora/Ogg and WebM/MKV video
  • Using VLC for packaging and encoding
  • Automating multimedia encoding

Customised Controls Using JavaScript

  • Configuring JavaScript use
  • Play and Pause buttons
  • Progress bars — for play and loading
  • Dsplaing current time and duration

Known Problems and Work-arounds

  • Overview
  • Autobuffer vs. preload
  • Browser-specific issues
  • OS/platform-specific issues

Conclusion and References

  • Demonstration sites and videos
  • Tutorials — web and print
  • Further issues to discuss and explore
  • References — the standard specs, APIs, etc.

HTML5 Video TrainingFurther Details

Course Objectives

On completion of this HTML5 training course, stuents should be able to:

  • Embed multimedia in web pages using the HTML5 video and audio tags
  • Deliver in cross-browser, high-usability and high-accessibility HTML5 code
  • Ensure that all browsers get suitably formatted media
  • Ensure that legacy browsers play the same media, e.g. by:
    • Either, adding support for the HTML5 video and audio tags
    • Or, delivering the same media wuth legacy fallbacks, e.g. Flash

Target Audience

  • Web Designers
  • Web Developers

Training Pre-requisites

Either:

  • HTML Fundamentals (HTML-02)
  • CSS Fundamentals (CSS-03)

Or equivalent practical experience of standards-based HTML and CSS

Training Style

A practical HTML5 training course with the majority of time devoted to hands-on excercises

Just over half the time will be devoted to hands-on excercises and just under half devoted to instruction