HTML and CSS Reference
In-Depth Information
}
videoElement.setAttribute("src", "muirbeach." + videoType);
videoElement.addEventListener("canplay",itemLoaded,false);
buttonSheet = new Image();
buttonSheet.onload = itemLoaded;
buttonSheet.src = "videobuttons.png";
}
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;
}
function itemLoaded() {
loadCount++;
if (loadCount >= itemsToLoad) {
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);
//Draw Buttons
//Play
