Video and audio: playing media in the browser - HTML5 in Action - page 360

Figure 8.8. Grayscale video playback through canvas combined with an image at 90 percent opacity
Figure 8.8 also shows the result of the next group of four steps you'll walk through:
• Group 2: Manipulating video as it's playing
◦ Step 1: Add a frame image to the video.
◦ Step 2: Adjust how the frame and video combine on the canvas.
◦ Step 3: Adjust the opacity of the video.
◦ Step 4: Grayscale the video being played back.
Step 1: Add a frame image to the video
You learned about drawing images on canvas in chapter 6 ; the basic approach is the
same for this step. First, you need an image on the page. It can go anywhere inside the
<#player> element (hide it with CSS display: none ):
<img src="images/frame.svg">