Beginning HTML5 media

Chapter 5: Manipulating Video via Canvas

Listing 5-1 Introducing the video pixel data into a canvas

Listing 5-2 Painting frames at different offsets into the canvas using requestAnimationFrame

Listing 5-3 Painting frames at different offsets into the canvas using setTimeout

Listing 5-4 Naive implementation of video tiling into a canvas

Listing 5-5 Reimplementation of video tiling into a canvas with getImageData

Listing 5-6 Reimplementation of video tiling into a canvas with createImageData

Listing 5-7 Reimplementation of video tiling into a Canvas with two Canvases

Listing 5-8 Making certain colors in a video transparent through a Canvas

Listing 5-9 Rendering a video in the 2D canvas with a 3D effect

Listing 5-10 Calculation of average color in a Canvas and display of ambient color frame

Listing 5-11 Filling a rectangular canvas region with a video pattern

Listing 5-12 Introducing a gradient transparency mark into the ambient video

Listing 5-13 Using a clipped path to filter out regions of the video for display

Listing 5-14 Text filled with video

Listing 5-15 Video reflection using a Canvas

Listing 5-16 Video spiral using Canvas

Listing 5-17 Fortune cookie video with user interactivity in Canvas