MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

}
//Request the next frame
requestAnimationFrame(renderVideo);
Here the page contains a hidden video element (style="display: none") that is told to start playing
once the document is loaded (video1.play()). In a requestAnimationFrame loop, the current frame of
the video is copied to the canvas (drawImage) and the pixels for the frame are copied (getImageData) into
the imgData buffer. We then go through that buffer and negate the color values, thereby producing a
photographically negative image (an alternate formula to change to grayscale is also shown in the code
comments, omitted above). We then copy those pixels back to the canvas (putImageData) so that when
we return, those negated pixels are rendered to the display.
Again, this is processor-intensive as it’s not generally a GPU-accelerated process and might perform
poorly on lower-power devices (be sure, however, to run a Release build outside the debugger when
evaluating erformance). It’s much better to write a video effect DLL where possible as discussed in
“Applying a Video Effect” later on. Nevertheless, it is a useful technique to know. What’s really
happening is that instead of drawing each frame with API calls, we’re simply using the video as a data
source. So we could, if we like, embellish the canvas in any other way we want before returning from the
renderVideo function. An example of this that I really enjoy is shown in Manipulating video using canvas
on Mozilla’s developer site, which dynamically makes green-screen background pixels transparent so
that an img element placed underneath the video shows through as a background. The same could even
be used to layer two videos so that a background video is used instead of a static image. Again, be
mindful of performance on low-power devices; you might consider providing a setting through which
the user can disable such extra effects.
Video Playback and Deferred Loading
Let’s now talk a little more about video playback itself. As we’ve already seen, simply including a video
element in your HTML or creating an element on the fly, gives you playback ability. In the code below,
the video is sourced from a local file, starts playing by itself, loops continually, and provides controls:
As we’ve been doing in this book, we’re not going to rehash the details that are available in the W3C
spec for the video and audio tags, found on http://www.w3.org/TR/html5/video.html. This spec will give
you all the properties, methods, and events for these elements; especially note the event summary in
section 4.8.10.15, and that most of the properties and methods for both are found in Media elements
section 4.8.10. Note that the track element is supported for both video and audio; you can find an
example of using it in Scenario 4 (demonstrating subtitles) of the HTML media playback sample. We
won’t be covering it more here.
416