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
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH6EX7: Video Properties
</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"
);
var
var
videoDiv
=
document
.
createElement
(
'div'
);
document
.
body
.
appendChild
(
videoDiv
);
videoDiv
.
appendChild
(
videoElement
);
videoDiv
.
setAttribute
(
"style"
,
"position: absolute; top: 50px; left: 600px; "
);
