HTML and CSS Reference
In-Depth Information
MIME type found that has the value of maybe or probably returned from the call to
canPlayType() :
function supportedVideoFormat(video) {
var returnExtension = "";
if (video.canPlayType("video/webm") =="probably" ||
video.canPlayType("video/webm") == "maybe") {
returnExtension = "webm";
} else if(video.canPlayType("video/mp4") == "probably" ||
video.canPlayType("video/mp4") == "maybe") {
returnExtension = "mp4";
} else if(video.canPlayType("video/ogg") =="probably" ||
video.canPlayType("video/ogg") == "maybe") {
returnExtension = "ogg";
}
return returnExtension;
}
We do not check for a condition when no valid video format is found and the return
value is “”. If that is the case, the code that has called this function might need to be
written in a way to catch that condition and alter the program execution. We did that
with the test of the return value and alert() , which we described previously.
Video is displayed like an image
When you write code to display a video on the canvas, you use the context.draw
Image() function, as though you are displaying a static image. Don't go looking for a
drawVideo() function in the HTML5 Canvas spec because you won't find it. The fol-
lowing code will display a video stored in a variable named videoElement , displayed at
the x , y position of 85 , 30 :
context.drawImage(videoElement , 85, 30);
However, when you draw a video for the first time, you will notice that it will not
move—it stays on the first frame. At first you might think you have done something
wrong, but you have not. You just need to add one more thing to make it work.
Set an interval to update the display
Just like when we discussed animation in the previous chapters, a video placed on
HTML5 Canvas using drawImage() will not update itself. You need to call draw
Image() in some sort of loop to continually update the image with new data from the
playing video in the HTML page (hidden or not). To do this, we call the video's
play() method, and then use setInterval() to call the drawScreen() function every 33
milliseconds. This will give you about 30 frames per second (FPS). We put this code in
our canvasApp() function, which is called after we know the video has loaded:
videoElement.play();
setInterval(drawScreen, 33);
Search WWH ::




Custom Search