HTML and CSS Reference
In-Depth Information
Example 6-6 gives the full code for displaying a video on the canvas and updating it using
setInterval() . Figure 6-6 shows this code in the browser.
Example 6-6. Basic HTML5 loading video onto the canvas
<!doctype html>
<html
<html lang= "en" >
<head>
<head>
<meta
<meta charset= "UTF-8" >
<title>
<title> CH6EX6: Basic HTML5 Load Video Onto The Canvas </title>
</title>
< script src = "modernizr.js" >< /script>
< script type = "text/javascript" >
window . addEventListener ( 'load' , eventWindowLoaded , false
false );
var
var videoElement ;
var
var videoDiv ;
function
function eventWindowLoaded () {
videoElement = document . createElement ( "video" );
videoDiv = document . createElement ( 'div' );
document . body . appendChild ( videoDiv );
videoDiv . appendChild ( videoElement );
videoDiv . setAttribute ( "style" , "display:none;" );
var
var videoType = supportedVideoFormat ( videoElement );
iif ( videoType == "" ) {
alert ( "no video support" );
return
return ;
}
videoElement . addEventListener ( "canplaythrough" , videoLoaded , false
false );
videoElement . setAttribute ( "src" , "muirbeach." + videoType );
}
function
function supportedVideoFormat ( video ) {
var
var returnExtension = "" ;
iif ( video . canPlayType ( "video/webm" ) == "probably" ||
video . canPlayType ( "video/webm" ) == "maybe" ) {
returnExtension = "webm" ;
} else
else iif ( video . canPlayType ( "video/mp4" ) == "probably" ||
video . canPlayType ( "video/mp4" ) == "maybe" ) {
returnExtension = "mp4" ;
} else
else iif ( video . canPlayType ( "video/ogg" ) == "probably" ||
video . canPlayType ( "video/ogg" ) == "maybe" ) {
returnExtension = "ogg" ;
}
return
return returnExtension ;
Search WWH ::




Custom Search