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
Example 6-7. Video properties
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH6EX7: Video Properties</title>
Search WWH ::

Custom Search