HTML5 Video/Audio
1-day Web Design Course in HTML5 Video & Audio — H5V
HTML5 Video Training Course Overview
A web media training course which introduces the purpose, syntax and usage of the HTML5 video and HTML audio tags
Course contents — 1 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
andaudio
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
Course contents — 2 Embedding Audio & Video
- Using
video
andaudio
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
Course contents — 3 Fallbacks for older browsers
- Using Flash — as a fallback
- Providing download links — as a fallback
embed
code builders
Course contents — 4 Encoding and Packaging A/V
- 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
Course contents — 5 JavaScript customised controls
- Configuring JavaScript use
- Play and Pause buttons
- Progress bars — for play and loading
- Dsplaing current time and duration
Course contents — 6 Problems & Workarounds
- Overview
- Autobuffer vs. preload
- Browser-specific issues
- OS/platform-specific issues
Course contents — 7 Conclusion and References
- Demonstration sites and videos
- Tutorials — web and print
- Further issues to discuss and explore
- References — the standard specs, APIs, etc.
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 exercises
Just over half the time will be devoted to hands-on exercises and just under half devoted to instruction