Mixing HTML5 Video and Canvas - HTML5 Canvas - page 275

specification is not finished . This is an obvious but important fact to note. If you are
developing for HTML5 or Canvas, you are developing with a moving target.
Specifically in CH6EX5.html , we found that the process of embedding the <video> tag
in the HTML page was the reason why the events weren't firing in Chrome. In order
to make this example work in Chrome, you need to add a call to playVideo() in the
eventWindowLoaded() function, like this:
function eventWindowLoaded() {
var videoElement = document.getElementById("thevideo");
videoElement.addEventListener('progress',updateLoadingStatus,false);
videoElement.addEventListener('canplaythrough',playVideo,false);
playVideo()
}
However, this code will not solve the core problem: we need a reliable way to know
when a video has finished loading so we can use it on the canvas. In Example 6-6 , we
will show you a way to make that happen.
Video and the Canvas
The HTML video object already has a poster property for displaying an image before
the video starts to play, as well as functions to autoplay and loop . So why is it necessary
to preload the video? Well, as we alluded to in the previous section, simply playing a
video is one thing—manipulating it with HTML5 Canvas is quite another. If you want
to start manipulating video while it is displayed on the canvas, you first need to make
sure it is loaded.
In this section, we will load video and then manipulate it in various ways so you can
see how powerful Canvas can be when it is mixed with other HTML5 elements.
Displaying a Video on HTML5 Canvas
First, we must learn the basics of displaying video on HTML5 Canvas. There are a few
important things to note that are not immediately obvious when you start working with
video and the canvas. We worked through them so you don't have to do it yourself
(you're welcome).
Video must still be embedded in HTML
Even though the video is only displayed on HTML5 Canvas, you still need a <video>
tag in HTML. The key is to put the video in a <div> (or a similar construct), and set the
display CSS style property of that <div> to none in HTML. This will ensure that while
the video is loaded in the page, it is not displayed. If we wrote the code in HTML, it
might look like this: