Chapter 8. Video and audio: playing media in the browser

 

Chapter 8 at a glance

Topic

Description, methods, and so on

Page
<video> element Using declarative markup to embed video in web pages:  
 
  • The <video> element
  • Common <video> element attributes: src, controls, width, height
  • The <source> element
241 242 248
Media Element Interface Controlling video and audio through JavaScript:  
 
  • The src DOM attribute
  • The play() method
  • The currentSrc DOM attribute
  • currentTime, duration, and playbackRate DOM attributes
242 244 249 255
Using <canvas> with <video> Using the <video> element as an image source in the <canvas> element:  
 
  • <video> as a parameter to context.drawImage()
  • context.globalAlpha
  • context.globalCompositeOperation
  • Using context.getImageData() and context.putImageData() to process the video
259 260 258 261

Look for this icon throughout the chapter to quickly locate the topics outlined in this table.

This chapter covers

  • Navigating the cross-browser and cross-device issues inherent in video
  • Converting between different audio and video formats
  • Controlling video playback
  • Performing video post-processing in the browser using the <canvas> element
  • Integrating video playback with other content

Clearly, the web is about more than text, but until HTML5 came along we had no built-in way to play audio and video in the HTML standard. Instead, browsers had to depend on third-party applications known as plug-ins.

8.1. Playing video with HTML5

8.2. Controlling videos with the HTMLMediaElement interface

8.3. Specifying multiple formats with the <source> element

8.4. Combining user input with video to build a telestrator

8.5. Summary