HTML and CSS Reference
In-Depth Information
In
drawScreen()
, we will call
drawImage()
to display the video, but since it will be called
every 33 milliseconds, the video will be updated and play on the canvas:
function drawScreen () {
context.drawImage(videoElement , 85, 30);
}
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-1.6.min.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.setAttribute("src", "muirbeach." + videoType);
videoElement.addEventListener("canplaythrough",videoLoaded,false);
}
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;
