36
Video and the Canvas
The HTML video object already has a poster property for displaying an image before
the video starts to play, as well as functions to autoplay and loop. So why is it necessary
to preload the video? Well, as we alluded to in the previous section, simply playing a
video is one thing—manipulating it with HTML5 Canvas is quite another. If you want
to start manipulating video while it is displayed on the canvas, you first need to make
sure it is loaded.
In this section, we will load video and then manipulate it in various ways so that you
can see how powerful Canvas can be when it is mixed with other HTML5 elements.
Displaying a Video on HTML5 Canvas
First, we must learn the basics of displaying video on HTML5 Canvas. There are a few
important things to note that are not immediately obvious when you start working with
video and the canvas. We worked through them so that you don’t have to do it yourself.
Video must still be embedded in HTML
Even though the video is displayed only on HTML5 Canvas, you still need a <video>
tag in HTML. The key is to put the video in a <div> (or a similar construct) and to set
the display CSS style property of that <div> to none in HTML. This will ensure that
while the video is loaded in the page, it is not displayed. If we wrote the code in HTML,
it might look like this:
<div style="position: absolute; top: 50px; left: 600px; display:none">
<video loop controls id="thevideo" width="320" height="240" preload="auto">
<source src="muirbeach.webm" type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
However, we already know that we don’t want to use an HTML embed. As we stated at
the end of the last section, video events do not appear to fire reliably when video
elements are embedded in the HTML page. For this reason, we need a new strategy to
load video dynamically—we’ll create the <div> and <video> elements in JavaScript.
The first thing we do in our JavaScript is add a couple variables to hold references to
the dynamic HTML elements we will create. The videoElement variable will hold the
dynamically created <video> tag, while videoDiv will hold the dynamically created
<div>:
var videoElement;
var videoDiv;
Video and the Canvas | 321
How to C#: Basic SDK Concept of XDoc.Word Conversely, conversion from PDF to Word (.docx) is also supported. methods and events necessary to load a Word document from file or query data and save the
extract data from pdf form fields; fill in pdf form reader
39
We use this method to create global variables throughout this chapter.
There are many reasons not to use global variables, but for these simple
applications, it’s the quickest way to get something on the canvas. If you
want to learn a better way to handle loading assets, the last section of
Chapter 7 employs a strategy to preload assets without the use of global
variables.
Next, we create our dynamic form elements in the eventWindowLoaded() function.
First, we use the createElement() method of the document DOM object to create a
<video>
element and a <div>
element, placing references to them in the variables wejust created:
function eventWindowLoaded() {
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
Next, we add videoElement as a child of videoDiv, essentially putting it inside of that
<div>
on the HTML page. We then set the style attribute of <div>
to display:none;
,which will make it invisible on the HTML page. We do this because, although we want
the video to display on the canvas, we don’t want to show it on the HTML page:
videoDiv.appendChild(videoElement);
videoDiv.setAttribute("style", "display:none;");
We then create another new variable named videoType that holds the results of a new
function we will create, supportedVideoFormat(). This function returns the file ex‐
tension of the supported video format for the browser; otherwise, it returns "" (an empty
string), which means that we alert the user that there is no video support in the app for
his browser:
var videoType = supportedVideoFormat(videoElement);
if (videoType == "") {
alert("no video support");
return;
}
Finally, we set the src property of the video element using the file extension we just
received from supportedVideoFormat() and create the event handler for the canplay
through event:
videoElement.addEventListener("canplaythrough",videoLoaded,false);
videoElement.setAttribute("src", "muirbeach." + videoType);
}
When the video has finished loading, the videoLoaded event handler is called, which
in turn calls the canvasApp() function:
322 | Chapter 6: Mixing HTML5 Video and Canvas
40
function videoLoaded(event) {
canvasApp();
}
Before the code in the last section will work, we need to define the supportedVideo
Format() function. The reason for this function is simple: because we are adding video
objects dynamically to the HTML page, we do not have a way to define multiple
<source> tags. Instead, we are going to use the canPlayType() method of the video
object to tell us which type of audio file to load.
The canPlayType() method takes a single parameter, a MIME type. It returns a text
string of maybe, probably, or nothing (an empty string).
"" (nothing)
This is returned if the browser knows the type cannot be rendered.
maybe
This is returned if the browser does not confidently know that the type can be
displayed.
probably
This is returned if the browser knows the type can be displayed using an audio or
video element.
We are going to use these values to determine which media type to load and play. For
the sake of this exercise, we will assume that both maybe and probably equate to yes. If
we encounter either result with any of our three MIME types (video/webm, video/mp4,
video/ogg), we will return the extension associated with that MIME type so that the
sound file can be loaded.
In the following function, video represents the instance of HTMLVideoElement that we
are going to test. The returnExtension variable represents that valid extension for the
first MIME type found that has the value of maybe or probably returned from the call
to canPlayType():
function supportedVideoFormat(video) {
var returnExtension = "";
if (video.canPlayType("video/webm") =="probably" ||
video.canPlayType("video/webm") == "maybe") {
returnExtension = "webm";
} else if(video.canPlayType("video/mp4") == "probably" ||
video.canPlayType("video/mp4") == "maybe") {
returnExtension = "mp4";
} else if(video.canPlayType("video/ogg") =="probably" ||
video.canPlayType("video/ogg") == "maybe") {
returnExtension = "ogg";
}
Video and the Canvas | 323
36
return returnExtension;
}
We do not check for a condition when no valid video format is found and the return
value is "". If that is the case, the code that has called this function might need to be
written in a way to catch that condition and alter the program execution. We did that
with the test of the return value and alert(), which we described previously.
Video is displayed like an image
When you write code to display a video on the canvas, you use the context.draw
Image() function, as though you were displaying a static image. Don’t go looking for a
drawVideo() function in the HTML5 Canvas spec because you won’t find it. The fol‐
lowing code will display a video stored in a variable named videoElement, displayed at
the x,y position of 85,30:
context.drawImage(videoElement , 85, 30);
However, when you draw a video for the first time, you will notice that it will not move
—it stays on the first frame. At first you might think you have done something wrong,
but you have not. You just need to add one more thing to make it work.
Set an interval to update the display
Just like when we discussed animation in the previous chapters, a video placed on
HTML5 Canvas using drawImage() will not update itself. You need to call draw
Image() in some sort of loop to continually update the image with new data from the
playing video in the HTML page (hidden or not). To do this, we call the video’s play()
method and then use a setTimeout() loop to call the drawScreen() function every 20
milliseconds. We put this code in our canvasApp() function, which is called after we
know the video has loaded:
videoElement.play();
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen();
}
gameLoop();
In drawScreen(), we will call drawImage() to display the video, but because it will be
called every 20 milliseconds, the video will be updated and play on the canvas:
function drawScreen () {
context.drawImage(videoElement , 85, 30);
}
324 | Chapter 6: Mixing HTML5 Video and Canvas
VB Imaging - VB ISBN Barcode Tutorial PointF(100F, 100F)) docx.Save("C:\\Sample_Barcode.pdf"). barcode settings listed in the above property table. BarcodeType.ISBN 'set barcode data barcode.Data
extract data from pdf form; extract data from pdf c# VB Imaging - VB Code 2 of 5 Generator 5 barcode size with parameters listed in the table below. quality Code 2 of 5 on PDF, TIFF, Microsoft of 5 type barcode encoding numeric data text "112233445566
pdf form save in reader; pdf data extraction open source
45
Example 6-6 gives the full code for displaying a video on the canvas and updating it
using setInterval(). Figure 6-6 shows this code in the browser.
Example 6-6. Basic HTML5 loading video onto the canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX6: Basic HTML5 Load Video Onto The Canvas</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var videoElement;
var videoDiv;
function eventWindowLoaded() {
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);
videoDiv.setAttribute("style", "display:none;");
var videoType = supportedVideoFormat(videoElement);
if (videoType == "") {
alert("no video support");
return;
}
videoElement.addEventListener("canplaythrough",videoLoaded,false);
videoElement.setAttribute("src", "muirbeach." + videoType);
}
function supportedVideoFormat(video) {
var returnExtension = "";
if (video.canPlayType("video/webm") =="probably" ||
video.canPlayType("video/webm") == "maybe") {
returnExtension = "webm";
} else if(video.canPlayType("video/mp4") == "probably" ||
video.canPlayType("video/mp4") == "maybe") {
returnExtension = "mp4";
} else if(video.canPlayType("video/ogg") =="probably" ||
video.canPlayType("video/ogg") == "maybe") {
returnExtension = "ogg";
}
return returnExtension;
}
function canvasSupport () {
return Modernizr.canvas;
}
Video and the Canvas | 325
37
function videoLoaded(event) {
canvasApp();
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
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);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
videoElement.play();
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen();
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
326 | Chapter 6: Mixing HTML5 Video and Canvas
24
Figure 6-6. Displaying a video on HTML5 Canvas
HTML5 Video Properties
We have already talked about some properties of HTMLVideoElement (inherited from
HTMLMediaElement), 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, con
trols, 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 preloaded 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()
function called by setInterval().The drawScreen() function that we have created to
display these values is as follows:
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);
Video and the Canvas | 327
29
// 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>
328 | Chapter 6: Mixing HTML5 Video and Canvas
Documents you may be interested
Documents you may be interested
