The Definitive Guide to HTML5 Video

The Definitive Guide to HTML5 Video

Released December 2010
Publisher(s): Apress
ISBN: 9781430230908

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

Plugins will soon be a thing of the past. The Definitive Guide to HTML5 Video is the first authoritative book on HTML5 Video, the new web standard that allows browsers to support audio and video elements natively. This makes it very easy for web developers to publish audio and video, integrating both within the general presentation of web pages. For example, media elements can be styled using CSS (style sheets), integrated into SVG (scalable vector graphics), and manipulated in a Canvas. The book offers techniques for providing accessibility to media elements, thus enabling consistent handling of alternative representations of media resources.

The Definitive Guide to HTML5 Video dives deep into the markup that is introduced for media element support in browsers. You'll explore the default user interface offered through browsers for media elements, as well as the JavaScript API provided to control their behavior. You'll also learn how to account for H.264 and Ogg Theora codecs.

Table of contents

  1. Copyright
  2. About the Author
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Preface
    1. The Challenge of a Definitive Guide
    2. Approaching This book
    3. Notation
    4. Downloading the Code
    5. Contacting the author
  6. 1. Introduction
    1. 1.1. A Bit of History
    2. 1.2. A Common Format?
    3. 1.3. Summary
  7. 2. Audio and Video Elements
    1. 2.1. Video and Audio Markup
      1. 2.1.1. The Video Element
        1. 2.1.1.1. Fallback Content
        2. 2.1.1.2. @src
        3. 2.1.1.3. @autoplay
        4. 2.1.1.4. @loop
        5. 2.1.1.5. @poster
        6. 2.1.1.6. @width, @height
        7. 2.1.1.7. @controls
        8. 2.1.1.8. @preload
      2. 2.1.2. The Audio Element
        1. 2.1.2.1. @src
        2. 2.1.2.2. @autoplay
        3. 2.1.2.3. @loop
        4. 2.1.2.4. @controls
        5. 2.1.2.5. @preload
      3. 2.1.3. The Source Element
        1. 2.1.3.1. @src
        2. 2.1.3.2. @type
        3. 2.1.3.3. @media
      4. 2.1.4. Markup Summary
    2. 2.2. Encoding Media Resources
      1. 2.2.1. Encoding MPEG-4 H.264 Video
      2. 2.2.2. Encoding Ogg Theora
      3. 2.2.3. Encoding WebM
      4. 2.2.4. Encoding MP3 and Ogg Vorbis
    3. 2.3. Publishing
      1. 2.3.1.
        1. 2.3.1.1. Web Server and HTTP Progressive Download
        2. 2.3.1.2. Streaming Using RTP/RTSP
        3. 2.3.1.3. Extending HTTP Streaming
      2. 2.3.2. Default User Interface
        1. 2.3.2.1. Visible controls
        2. 2.3.2.2. Context Menus
      3. 2.3.3. Controls Summary
    4. 2.4. Summary
  8. 3. CSS3 Styling
    1. 3.1. CSS Box Model and Video
    2. 3.2. CSS Positioning and Video
      1. 3.2.1. Inline Box Type
      2. 3.2.2. None Box Type
      3. 3.2.3. Block Box Type
      4. 3.2.4. Relative Positioning Mode
      5. 3.2.5. Float Positioning Mode
      6. 3.2.6. Absolute Positioning Mode
      7. 3.2.7. Video Scaling and Alignment Within Box
    3. 3.3. CSS Basic Properties
      1. 3.3.1. Opacity
      2. 3.3.2. Gradient
      3. 3.3.3. Marquee
    4. 3.4. CSS Transitions and Transforms
      1. 3.4.1. Transitions
      2. 3.4.2. 2D Transforms
      3. 3.4.3. 3D Transforms
      4. 3.4.4. Putting a Video Gallery Together
    5. 3.5. CSS Animations
    6. 3.6. Summary
  9. 4. JavaScript API
    1. 4.1. Content Attributes
    2. 4.2. IDL Attributes
      1. 4.2.1. General Features of Media Resources
      2. 4.2.2. Playback-Related Attributes of Media Resources
      3. 4.2.3. States of the Media Element
    3. 4.3. Control Methods in the API
    4. 4.4. Events
    5. 4.5. Custom Controls
    6. 4.6. Summary
  10. 5. HTML5 Media and SVG
    1. 5.1. HTML5 Media and SVG
      1. 5.1.1.
        1. 5.1.1.1. SVG Features
    2. 5.2. Use of SVG with <video>
      1. 5.2.1.
        1. 5.2.1.1. Inline SVG
        2. 5.2.1.2. SVG for Masking
        3. 5.2.1.3. Video in SVG
        4. 5.2.1.4. Our examples
    3. 5.3. Basic Shapes and <video>
      1. 5.3.1.
        1. 5.3.1.1. Shapes as a mask
    4. 5.4. SVG Text and <video>
    5. 5.5. SVG Styling for <video>
      1. 5.5.1.
        1. 5.5.1.1. SVG Play/Pause Toggle
        2. 5.5.1.2. SVG Gradients
        3. 5.5.1.3. SVG Pattern
    6. 5.6. SVG Effects for <video>
      1. 5.6.1.
        1. 5.6.1.1. SVG Clip-Path
        2. 5.6.1.2. SVG Filters
    7. 5.7. SVG Animations and <video>
      1. 5.7.1.
        1. 5.7.1.1. SVG animate
        2. 5.7.1.2. SVG Animate Color and Transform
        3. 5.7.1.3. SVG Animate Motion
    8. 5.8. Media in SVG
      1. 5.8.1.
        1. 5.8.1.1. Video in SVG
        2. 5.8.1.2. Masking Video in SVG
        3. 5.8.1.3. SVG Reflection
        4. 5.8.1.4. SVG Edge Detection
    9. 5.9. Summary
  11. 6. HTML5 Media and Canvas
    1. 6.1. Video in Canvas
      1. 6.1.1.
        1. 6.1.1.1. drawImage()
        2. 6.1.1.2. Extended drawImage()
        3. 6.1.1.3. getImageData(), putImageData()
        4. 6.1.1.4. getImageData(), simple putImageData()
        5. 6.1.1.5. Scratch Canvas
    2. 6.2. Styling
      1. 6.2.1.
        1. 6.2.1.1. Pixel Transparency to Replace the Background
        2. 6.2.1.2. Scaling Pixel Slices for a 3D Effect
        3. 6.2.1.3. Ambient CSS Color Frame
        4. 6.2.1.4. Video as Pattern
    3. 6.3. Compositing
      1. 6.3.1.
        1. 6.3.1.1. Gradient Transparency Mask
        2. 6.3.1.2. Clipping a Region
    4. 6.4. Drawing Text
    5. 6.5. Transformations
      1. 6.5.1.
        1. 6.5.1.1. Reflections
        2. 6.5.1.2. Spiraling Video
    6. 6.6. Animations and Interactivity
    7. 6.7. Summary
  12. 7. HTML5 Media and Web Workers
    1. 7.1. Using Web Workers on Video
    2. 7.2. Motion Detection with Web Workers
      1. 7.2.1.
        1. 7.2.1.1. Gray-Scaling
        2. 7.2.1.2. Motion Detection
    3. 7.3. Region Segmentation
    4. 7.4. Face Detection
    5. 7.5. Summary
  13. 8. HTML5 Audio API
    1. 8.1. Reading Audio Data
      1. 8.1.1. Extracting Audio Samples
      2. 8.1.2. Information about the Framebuffer
      3. 8.1.3. Rendering an Audio Waveform
      4. 8.1.4. Rendering an audio spectrum
    2. 8.2. Generating Audio Data
      1. 8.2.1. Creating a Single-Frequency Sound
      2. 8.2.2. Creating Sound from Another Audio Source
      3. 8.2.3. Continuous Playback
      4. 8.2.4. Manipulating Sound: the Bleep
      5. 8.2.5. A Tone Generator
    3. 8.3. Overview of the Filter Graph API
      1. 8.3.1. Basic Reading and Writing
      2. 8.3.2. Advanced Filters
      3. 8.3.3. Creating a Reverberation Effect
      4. 8.3.4. Waveform Display
    4. 8.4. Summary
  14. 9. Media Accessibility and Internationalization
    1. 9.1. Alternative Content Technologies
      1. 9.1.1. Vision-impaired Users
        1. 9.1.1.1. (1) Perceiving Video Content
        2. 9.1.1.2. (2) Interacting with Content
          1. 9.1.1.2.1. Activate/Deactivate Descriptions
          2. 9.1.1.2.2. Navigate Within and into Media
          3. 9.1.1.2.3. Navigate Between Alternative Content Tracks
          4. 9.1.1.2.4. Navigate out of Content
      2. 9.1.2. Hard-of-hearing Users
        1. 9.1.2.1. (1) Captions
        2. 9.1.2.2. (2) Transcript
        3. 9.1.2.3. (3) Sign Translation
        4. 9.1.2.4. (4) Clear Audio
      3. 9.1.3. Deaf-blind users
        1. 9.1.3.1. (1) Individual Consumption
        2. 9.1.3.2. (2) Shared Viewing Environment
      4. 9.1.4. Learning Support
      5. 9.1.5. Foreign Users
        1. 9.1.5.1. (1) Scene Text Translations
        2. 9.1.5.2. (2) Audio Translations
      6. 9.1.6. Technology Summary
    2. 9.2. Transcriptions
      1. 9.2.1. Plain Transcripts
      2. 9.2.2. Interactive Transcripts
    3. 9.3. Alternative Synchronized Text
      1. 9.3.1. WebSRT
        1. 9.3.1.1. (1) Text Description
        2. 9.3.1.2. (2) Captions
        3. 9.3.1.3. (3) Subtitles
        4. 9.3.1.4. (4) Chapters
        5. 9.3.1.5. (5) Lyrics / Karaoke
        6. 9.3.1.6. (6) Grammatical Markup
      2. 9.3.2. HTML Markup
        1. 9.3.2.1. (1) The <track> element
      3. 9.3.3. In-band Use
        1. 9.3.3.1. (1) Ogg
        2. 9.3.3.2. (2) WebM
        3. 9.3.3.3. (3) MPEG
      4. 9.3.4. JavaScript API
        1. 9.3.4.1. (1) MutableTimedTrack
        2. 9.3.4.2. (2) TimedTrack
        3. 9.3.4.3. (3) TimedTrackCue
    4. 9.4. Multitrack Audio/Video
    5. 9.5. Navigation
      1. 9.5.1. Chapters
      2. 9.5.2. Keyboard Navigation
      3. 9.5.3. Media Fragment URIs
        1. 9.5.3.1. URLs in Cues
    6. 9.6. Accessibility Summary
  15. 10. Audio and Video Devices
    1. 10.1. Architectural Scenarios
    2. 10.2. The <device> element
      1. 10.2.1.
        1. 10.2.1.1. @type
        2. 10.2.1.2. @data
    3. 10.3. The Stream API
      1. 10.3.1.
        1. 10.3.1.1. Self-view video
        2. 10.3.1.2. Recording
    4. 10.4. The WebSocket API
      1. 10.4.1.
        1. 10.4.1.1. WebSockets API
        2. 10.4.1.2. Message exchange
        3. 10.4.1.3. Shared video control
        4. 10.4.1.4. Video conferencing
    5. 10.5. The ConnectionPeer API
    6. 10.6. Summary
  16. A. Summary and Outlook
    1. A.1. Outlook
      1. A.1.1. Metadata API
      2. A.1.2. Quality of Service API
    2. A.2. Summary of the Book
      1. A.2.1.
        1. A.2.1.1. The Introductory Chapters
        2. A.2.1.2. Interacting with other HTML Elements
        3. A.2.1.3. Recent Developments

Product information

  • Title: The Definitive Guide to HTML5 Video
  • Author(s):
  • Release date: December 2010
  • Publisher(s): Apress
  • ISBN: 9781430230908