Mixing HTML5 Video and Canvas - HTML5 Canvas - page 472

function function eventWindowLoaded () {

videoElement = document . createElement ( "video" );
videoDiv = document . createElement ( 'div' );
document . body . appendChild ( videoDiv );

Next,weadd videoElement asachildof videoDiv ,essentiallyputtingitinsideofthat <div>
on the HTML page. We then set the style attribute of <div> to display:none; , which will
make it invisible on the HTML page. We do this because, although we want the video to dis-
play on the canvas, we don't want to show it on the HTML page:

videoDiv . appendChild ( videoElement );
videoDiv . setAttribute ( "style" , "display:none;" );

Wethencreateanothernewvariablenamed videoType thatholdstheresultsofanewfunction
wewillcreate, supportedVideoFormat() .Thisfunctionreturnsthefileextensionofthesup-
ported video format for the browser; otherwise, it returns "" (an empty string), which means
that we alert the user that there is no video support in the app for his browser:

var var videoType = supportedVideoFormat ( videoElement );

iif ( videoType == "" ) {
alert ( "no video support" );
return return ;

}

Finally,wesetthe src propertyofthe video elementusingthefileextensionwejustreceived
from supportedVideoFormat() and create the event handler for the canplaythrough event:

videoElement . addEventListener ( "canplaythrough" , videoLoaded , false false );

videoElement . setAttribute ( "src" , "muirbeach." + videoType );

}

When the video has finished loading, the videoLoaded event handler is called, which in turn
calls the canvasApp() function:

function function videoLoaded ( event ) {

canvasApp ();

}

Beforethecodeinthelastsectionwillwork,weneedtodefinethe supportedVideoFormat()
function. The reason for this function is simple: because we are adding video objects dynam-
icallytotheHTMLpage,wedonothaveawaytodefinemultiple <source> tags.Instead,we