HTML and CSS Reference
In-Depth Information
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
tocatchthatconditionandaltertheprogramexecution.Wedidthatwiththetestofthe 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.drawImage()
function, as though you were displaying a static image. Don't go looking for a drawVideo()
function in the HTML5 Canvas spec because you won't find it. The following code will dis-
play 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 drawImage() 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 a
setTimeout() loop to call the drawScreen() function every 20 milliseconds. We put this
code in our canvasApp() function, which is called after we know the video has loaded:
videoElement . play ();
function
function gameLoop () {
window . setTimeout ( gameLoop , 20 );
drawScreen ();
}
gameLoop ();
In drawScreen() ,wewillcall drawImage() todisplaythevideo,butbecauseitwillbecalled
every 20 milliseconds, the video will be updated and play on the canvas:
function
function drawScreen () {
context . drawImage ( videoElement , 85 , 30 );
}
Search WWH ::




Custom Search