Mixing HTML5 Video and Canvas - HTML5 Canvas - page 277

var videoType = supportedVideoFormat(videoElement);
if (videoType == "") {
alert("no video support");
return;
}
Finally, we set the src property of the video element using the file extension we just
received from supportedVideoFormat() , and create the event handler for the canplay
through event:
videoElement.setAttribute("src", "muirbeach." + videoType);
videoElement.addEventListener("canplaythrough",videoLoaded,false);
}
When the video has finished loading, the videoLoaded event handler is called, which in
turn calls the canvasApp() function:
function videoLoaded(event) {
canvasApp();
}
Before the code in the last section will work, we need to define the supportedVideo
Format() function. The reason for this function is simple: since we are adding video
objects dynamically to the HTML page, we do not have a way to define multiple
<source> tags. Instead, we are going to use the canPlayType() method of the video object
to tell us which type of audio file to load.
The canPlayType() method takes a single parameter, a MIME type. It returns a text
string of maybe , probably , or nothing (an empty string).
“” (nothing)
This is returned if the browser knows the type cannot be rendered.
maybe
This is returned if the browser does not confidently know that the type can be
displayed.
probably
This is returned if the browser knows the type can be displayed using an audio or
video element.
We are going to use these values to determine which media type to load and play. For
the sake of this exercise, we will assume that both maybe and probably equate to yes . If
we encounter either result with any of our three MIME types ( video/webm , video/
mp4 , video/ogg ), we will return the extension associated with that MIME type so the
sound file can be loaded.
In the function below, video represents the instance of HTMLVideoElement that we are
going to test. The returnExtension variable represents that valid extension for the first