The code displays a video that will play a video and then display some text on the screen at specific locations on the video screen.
The code works but I would like to see if I could change somethings to make it better and how I would do that. You should be able to just copy the code into a web browser and it should work fine.
Code:
<!doctype html>
<html>
<head>
<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);
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;
}
function videoLoaded() {
canvasApp();
}
function canvasApp() {
function drawScreen () {
//Background and redraw background screen
context.fillStyle = '#ffffaa';
context.fillRect(0,0,theCanvas.width,theCanvas.height);
context.strokeStyle = '#000000';
context.strokeRect(5,5,theCanvas.width-10,theCanvas.height-10);
context.drawImage(videoElement,85,30);
context.fillStyle = "#000000";
context.font = "10px sans";
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,80,290);
context.fillText ("Muted: " + videoElement.muted,160,290);
context.fillText ("Controls: " + videoElement.controls,240,290);
context.fillText ("Volume: " + videoElement.volume,320,290);
//Display Message
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);
}
}
}
var messages = new Array();
messages[0] = {time:7,message:"", x:0 ,y:0};
messages[1] = {time:1,message:"I love David Mathews Band!", x:90 ,y:200};
messages[2] = {time:4,message:"Look At Those Waves!", x:240 ,y:240};
messages[3] = {time:8,message:"Look At Those Rocks!", x:100 ,y:100};
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"></canvas>
</div>
</body>
</html>
