Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 290

video.autoplay = false;
video.loop = false;
// Step 2: Add one or more sources
var sources = [
{src: "bunny.ogg", type: "video/ogg"},
{src: "bunny.mp4", type: "video/mp4"},
{src: "bunny.webm", type: "webm"}
];
for (var i in sources) {
var source = document.createElement("source");
source.src = sources[i].src;
source.type = sources[i].type;
video.appendChild(source);
}
// Step 3: Initialize the video
function initVideo() {
video.addEventListener("play", initCanvas);
video.play();
}
// Step 4: Only initialize our canvases once
function initCanvas() {
// Step 1: Initialize canvas, if needed
if (ctx == null) {
var canvas =
document.createElement("canvas");
var canvasOff =
document.createElement("canvas");
canvas.width = canvasOff.width =
video.videoWidth;
canvas.height = canvasOff.height =
video.videoHeight;