HTML and CSS Reference
In-Depth Information
HTML5 Video Properties
Wehavealreadytalkedaboutsomepropertiesof
HTMLVideoElement
(inheritedfrom
HTMLMe-
diaElement
), but now that we have a video loaded onto the canvas, it would be interesting to
see them in action.
In this example, we are going to display seven properties of a playing video, taken from the
HTMLVideoElement
object:
duration
,
currentTime
,
loop
,
autoplay
,
muted
,
controls
,and
volume
. Of these,
duration
,
loop
, and
autoplay
will not update because they are set when
the video is embedded. Also, because we call the
play()
function of the video after it is pre-
loaded in JavaScript,
autoplay
can be set to
false
but the video will play anyway. The other
properties will update as the video is played.
To display these values on the canvas, we will draw them as text in the
drawScreen()
func-
tion called by
setInterval()
.The
drawScreen()
function that we have created to display
these values is as follows:
function
function
drawScreen
() {
//Background
context
.
fillStyle
=
'#ffffaa'
;
context
.
fillRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
//Box
context
.
strokeStyle
=
'#000000'
;
context
.
strokeRect
(
5
,
5
,
theCanvas
.
width
−
10
,
theCanvas
.
height
−
10
);
//video
context
.
drawImage
(
videoElement
,
85
,
30
);
// Text
context
.
fillStyle
=
"#000000"
;
context
.
fillText
(
"Duration:"
+
videoElement
.
duration
,
10
,
280
);
context
.
fillText
(
"Current time:"
+
videoElement
.
currentTime
,
260
,
280
);
context
.
fillText
(
"Loop: "
+
videoElement
.
loop
,
10
,
290
);
context
.
fillText
(
"Autoplay: "
+
videoElement
.
autoplay
,
100
,
290
);
context
.
fillText
(
"Muted: "
+
videoElement
.
muted
,
180
,
290
);
context
.
fillText
(
"Controls: "
+
videoElement
.
controls
,
260
,
290
);
context
.
fillText
(
"Volume: "
+
videoElement
.
volume
,
340
,
290
);
}
Figure 6-7
shows what the attributes look like when displayed on the canvas. Notice that we
have placed the
<video>
embed next to the canvas, and we have
not
set the CSS display
style to
none
. We did this to demonstrate the relationship between the video embedded in the
HTML page and the one playing on the canvas. If you roll over the video in the HTML page,
