HTML and CSS Reference
In-Depth Information
using the
fillStyle
property and
fillText()
function of the Canvas context, producing
the results shown in
Figure 6-8
:
for (var i = 0; i < messages.length ; i++) {
var tempMessage = messages[i];
if (videoElement.currentTime > tempMessage.time) {
context.font = "bold 14px sans";
context.fillStyle = "#FFFF00";
context.fillText (tempMessage.message, tempMessage.x ,tempMessage.y);
}
}
Figure 6-8. Canvas video displaying text overlay events
Of course, this is a very simple way to create events. The various text messages will not
disappear after others are created, but that is just a small detail. The point of this ex-
ercise is that, with code like this, you could do almost anything with a running video.
You could pause the video, show an animation, and then continue once the animation
is done. Or you could pause to ask the user for input and then load a different video.
Essentially, you can make the video completely interactive in any way you choose. The
model for these events could be very similar to the one we just created.
Example 6-8
provides the full code listing for this application.
Example 6-8. Creating simple video events
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX8: Creating Simple Video Events</title>
