HTML and CSS Reference
In-Depth Information
you can see the control panel. If you set the volume, you will notice that the volume attribute
displayed on the canvas will change. If you pause the embedded video, the video on the can-
vas will stop playing and the currentTime value will stop.
This demo should give you a very good idea of the relationship between the video on the can-
vas and the one embedded with the <video> tag. Even though they are displayed using com-
pletely different methods, they are in fact one and the same.
Figure 6-7. Video on the canvas with properties displayed and <video> embed
You can see Example 6-7 in action by executing CH6EX7.html from the code distribution.
Example 6-7. Video properties
<!doctype html>
<html lang= "en" >
<meta charset= "UTF-8" >
<title> CH6EX7: Video Properties </title>
< script src = "modernizr.js" >< /script>
< script type = "text/javascript" >
window . addEventListener ( 'load' , eventWindowLoaded , false
false );
var videoElement ;
var videoDiv ;
function eventWindowLoaded () {
videoElement = document . createElement ( "video" );
var videoDiv = document . createElement ( 'div' );
document . body . appendChild ( videoDiv );
videoDiv . appendChild ( videoElement );
videoDiv . setAttribute ( "style" , "position: absolute; top: 50px; left: 600px; " );
Search WWH ::

Custom Search