HTML5 Media

HTML5 Media

by Shelley Powers
Released August 2011
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449315313

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

If you're a web developer or designer familiar with CSS and JavaScript, this tightly focused introduction shows you how to add HTML5 media elements to your web pages, and how to provide custom controls for letting web visitors interact with the content.

You'll also learn how to provide subtitles and captions, using file formats that work in browsers now. This book includes code samples and downloadable examples to help you take full advantage of audio and video in your web pages.

  • Ensure your audio or video works in all browsers that support HTML5 media elements
  • Learn about widely supported media file codecs and containers
  • Customize the appearance of media elements with CSS
  • Build your own applications to work with and control media elements
  • Apply video subtitles and closed captioning with SRT and WebVTT
  • Use SVG filters with HTML5, and play videos in your Canvas applications
  • Explore upcoming features, including support for multiple tracks and synchronized playback

Table of contents

  1. HTML5 Media
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. A Note Regarding Supplemental Files
    3. Preface
      1. About this Book
        1. Book Audience
        2. Examples
        3. Target Browsers
        4. The Polyglot Question: HTML or XHTML?
      2. Conventions Used in This Book
      3. Using Code Examples
      4. Safari® Books Online
      5. How to Contact Us
      6. Acknowledgments
    4. 1. HTML5 Audio and Video Elements: By-Default
      1. Adding a Media Element to a Web Page
        1. Minimal Element Syntax
        2. Disabled Scripting and the Magically Appearing Controls UI
      2. Support for Multiple Media File Types
      3. The Audio and Video File Babble and the Source Element in Detail
        1. HTML5 Audio Codecs/Containers and Lossless versus Lossy Compression
          1. WAV Audio Format
          2. MP3
          3. Ogg Vorbis
          4. The AAC Codec
          5. WebM Audio
          6. Providing Codec information in the type attribute
        2. HTML5 Video Element Codecs/Containers
          1. H.264
          2. Ogg Theora
          3. WebM
          4. Ensuring Complete Video Codec Support
      4. The Media Elements in More Detail
        1. Media Elements and Global Attributes
        2. Media-Specific Attributes
        3. Video-Only Attributes and Video Resolutions
      5. Audio and Video in Mobile Devices and Media Profiles
        1. Challenges of a Mobile Environment
        2. Media Profiles and Codec Parameters
      6. Converting Audio and Video Content
        1. The Free Mp3/Wma/Ogg Converter
        2. Video Conversion with Miro Video Converter and Handbrake
        3. Using a Frame Grabber
    5. Customizing Media Elements
      1. CSS Styling
        1. Adding a Fancy Border
        2. Using the CSS Pseudo Classes
        3. Applying a CSS3 Transform to a Video Element
        4. Animating the Transforms with CSS3 Transitions
        5. Adding an Overlay
      2. Custom Controls with JavaScript and CSS
        1. Creating a Basic Control
        2. Adding CSS and Tracking Playback
        3. Creating a Custom Progress Bar
        4. The Custom Control and Seekability
      3. Debugging and Discovering Browser Support
    6. Media Elements, Multiple Tracks, and Accessibility
      1. Media Controllers and the MediaController Interface
      2. Multiple Tracks and the Track List Interfaces
        1. Audio and Video Track Collections
        2. Multiple Text Tracks
      3. The Track Element
        1. Track File Formats
          1. SRT
          2. WebVTT
      4. JavaScript Support for Subtitles and Captions
        1. Captionator
        2. Playr
        3. The Leanback Player
    7. 4. Advanced Media Element Scripting
      1. Media Elements and Canvas
        1. Playing a Video in an Canvas Element
        2. Creating a Video Visual Filter using the Canvas Element
      2. Media Elements and SVG
        1. Adding an HTML5 Video to an SVG Document
        2. Applying SVG Filters to Video Files within HTML
      3. The Audio Data APIs
    8. A. HTML Media Frameworks and Tools
      1. Subtitle/Caption Rendering Library
      2. Video Players
        1. Audio Only or Audio/Video Players
      3. Other Libraries, Utilities, and Toys
    9. About the Author
    10. Colophon
    11. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: HTML5 Media
  • Author(s): Shelley Powers
  • Release date: August 2011
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449315313