HTML and CSS Reference
In-Depth Information
// 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, 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 canvas 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 canvas and the one embedded with the
<video>
tag. Even though they are displayed
using completely 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">
<head>
<meta charset="UTF-8">
<title>CH6EX7: Video Properties</title>
