HTML and CSS Reference
In-Depth Information
<source src="movieclip.webm" type="video/webm"/>
<source src="movieclip.ogv" type="video/ogg"/>
<p>This browser does not support the <code>video</code> element.</p>
</video>
<script src="utils.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('movieclip');
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.drawImage(video, 0, 0);
}());
};
</script>
</body>
</html>
The important parts in bold. The
autoplay
attribute has been added to the
video
element which starts
playing it as soon as the page loads. We need a way to start the video, since its HTML element has been
hidden using CSS, and we do not have access to its built-in controls. If you don't have any videos handy,
The
video
element is related to the
audio
element, which is also new in HTML5. But let's not get ahead of
ourselves, you see how to add sound to your animations in Chapter 19.
Pixel manipulation
The drawing API provides direct access to the pixels that compose the image on the canvas. You can
create, read, and write the pixel data, which can be used to make some really cutting-edge effects and
animations in the web browser.
While direct pixel access is a powerful feature, manipulating them in a coherent way is an advanced topic.
The code here is intended to demonstrate some interesting visual effects that you can create when
working with pixels. Since we won't use these techniques anywhere else in the topic, you can consider this
section as optional. If you get a little confused by the code (the implementation is not the most straight-
forward), or just want to move on to good stuff in the next chapter, feel free to skip over it. You can always
come back later.
Getting pixel data
Direct access to the pixels is provided by the
ImageData
object of the canvas context. To return a copy of
the pixel data for a rectangular area on the canvas element, call:
var imagedata = context.getImageData(x, y, width, height);