HTML and CSS Reference
In-Depth Information
tempvideo = {x:tempX,y:tempY,width:180, height:120, speed:tempSpeed, angle:tempAngle,
xunits:tempXunits, yunits:tempYunits}
videos.push(tempvideo);
}
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
The HTML5 video element combined with the canvas is an exciting,
emerging area that is being explored on the Web as you read this. One
great example of this is the exploding 3D video at CraftyMind.com :
http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and
-mapping-it-into-3d-space/ .
What's Next?
In this chapter we introduced the HTML <video> tag and showed some basic ways that
it could be used on an HTML page, including how to manipulate loaded video in
numerous ways. While we showed you how to do some pretty cool stuff with the video
and HTML5 Canvas, this is really just the tip of the iceberg. We believe that these two
very powerful and flexible new features of HTML5 (video and the canvas) will prove
to be a very potent combination for web applications of the future. In the next chapter,
we will dive into HTML5 audio and how it can be used with applications created on
the canvas.
Search WWH ::




Custom Search