O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Beginning HTML5 Media : Make the most of the new video and audio standards for the Web, Second Edition

Book Description

Beginning HTML5 Media, Second Edition is a comprehensive introduction to HTML5 video and audio. The HTML5 video standard enables 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), viewed on a mobile device, and manipulated in a Canvas or an audio filter graph. The book offers techniques for providing accessibility to media elements, enabling consistent handling of alternative representations of media resources. The update includes all of the changes and revisions since the first HTML5 draft.

Beginning HTML5 Media 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, WebM and Ogg Theora codecs as well as explore the emerging Web Audio API standard, which provides an extensive set of hardware-accelerated audio filters to achieve a level of audio signal manipulation in the browser previously only available to audio professionals.

Table of Contents

  1. Cover
  2. Title
  3. Copyright
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. About the Authors
  8. About the Techincal reviewer
  9. Acknowledgments
  10. Preface
  11. Chapter 1: Encoding Video
    1. Containers
      1. Video Containers
      2. Audio Containers
    2. Codecs
      1. Video Codecs
      2. Audio Codecs
    3. Encoding Video
      1. Encoding with Miro Video Converter
      2. Encoding Ogg Video with Firefogg
      3. Encoding an MP4 File with the Adobe Media Encoder CC
      4. Encoding Media Resources Using FFmpeg
    4. Summary
  12. Chapter 2: Using and Manipulating HTML5 Video and Audio Elements
    1. The <video> element
      1. Fallback Content
    2. The Audio Element
    3. The Source Element
    4. The Default Player Interfaces
      1. Visible Controls
      2. Context Menus
    5. Publishing
    6. CSS and Video
    7. CSS Basic Properties
      1. Playing Background Video
    8. CSS 2D Transforms
    9. CSS Animations
    10. Summary
  13. Chapter 3: The JavaScript API
    1. Reflected Content Attributes
    2. Further IDL Attributes
    3. General Features of Media Resources
      1. @currentSrc
      2. @duration
      3. @volume
      4. @defaultMuted
      5. @videoWidth, @videoHeight
    4. Playback-Related Attributes of Media Resources
      1. @currentTime
      2. @seeking
      3. @paused
      4. @ended
      5. @defaultPlaybackRate, @playbackRate
    5. States of the Media Element
      1. @networkState
      2. @readyState
      3. @error
      4. @buffered
      5. @played
      6. @seekable
    6. Control Methods in the API
      1. load( )
      2. play( )
      3. pause( )
      4. canPlayType( )
      5. getStartDate()
    7. Events
    8. Third-Party Players
      1. Using the JW Player
      2. Using Video.JS
    9. A Custom Player
    10. Summary
  14. Chapter 4: Accessibility, Internationalization, and Navigation
    1. Alternative Content Technologies
      1. Vision-Impaired Users
      2. Hard-of-Hearing Users
    2. Transcript
      1. Sign Translation
      2. Clear Audio
    3. Deaf-Blind Users
      1. Individual Consumption
      2. Shared Viewing Environment
    4. Learning Support
    5. Foreign Users
      1. Scene Text Translations
      2. Audio Translations
    6. Technology Summary
    7. Transcripts
      1. Interactive Transcripts
    8. The <track> Element: Subtitles, Captions, and Text Descriptions
      1. @src
      2. @default
      3. @label
      4. @srclang
      5. @kind
    9. In-band Text Tracks
    10. JavaScript API: Flexibility for Web Developers
      1. Track Element
      2. TextTrack Object
      3. TextTrackCue
      4. TextTrackCueList
      5. Media Element
    11. WebVTT: Authoring Subtitles, Captions, Text Descriptions and Chapters
      1. Cue Styling
      2. Cue Markup
      3. Cue Settings
      4. Other WebVTT Features
    12. Multiple Audio and Video Tracks: Audio Descriptions and Sign Language Video
      1. Multitrack Media
      2. MediaController: Synchronizing Independent Media Elements
      3. @mediaGroup
      4. @controller
    13. Navigation: Accessing Content
    14. Summary
  15. Chapter 5: HTML5 Video and Canvas
    1. Video in Canvas
      1. drawImage( )
      2. Extended drawImage( )
      3. Frame Grabbing
      4. Pixel Painting
      5. Scratch Canvas
    2. Styling
      1. Pixel Transparency to Replace the Background
      2. Scaling Pixel Slices for a 3D Effect
      3. Ambient CSS Color Frame
      4. Video as Pattern
      5. Gradient Transparency Mask
      6. Clipping a Region
    3. Drawing Text
    4. Transformations
      1. Reflections
      2. Spiraling Video
    5. Animations and Interactivity
    6. Summary
  16. Chapter 6: Manipulating Audio Through the Web Audio API
    1. Bitdepth and Samplerates
      1. The HTML5 Audio Formats
      2. Filter Graphs and the AudioContext
      3. Reading and Generating Audio Data
      4. Manipulating Audio Data
      5. 3D Spatialization and Panning
      6. JavaScript Manipulation of Audio Data
      7. Offline Audio Processing
      8. Audio Data Visualization
    2. Summary
  17. Index