HTML and CSS Reference
In-Depth Information
Using video elements
Similar to drawing a still image, we can also render a video to the canvas—one frame at a time. The
video
element is an exciting addition to the HTML5 specification that allows movies to play in the web browser,
without having to use plug-ins like Adobe Flash. While this isn't the kind of animation that this topic is
about, you can still create some interesting effects once it's displayed on the canvas.
To include a video in your document, add the following element to your HTML:
<video controls autobuffer>
<source src="movieclip.mp4" type="video/mp4"/>
<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>
Here, the
controls
attribute adds buttons for the user to play and stop the video.
autobuffer
tells the
browser to begin downloading the file immediately, so it's ready to play when the user starts it. The
<p>
element is provided as a fallback to warn the user if their browser does not support HTML5 video; and if it
is supported, the warning is not displayed.
There are multiple
<source>
tags to provide alternatives for the video format. Due to licensing restrictions,
different browsers support different video file formats. To make sure a video plays across HTML5-capable
browsers, you must supply multiple versions of the it. MP4 is a closed format which, at the time of writing,
is required by IE and Safari. WebM and Ogg are both open, royalty-free, formats that can be played in
Chrome, Firefox, and Opera. Since this is a rapidly evolving area, test your videos and formats in as many
browsers as you can to make sure they play correctly.
In the next example, we load a video and draw it frame-by-frame to the canvas element. Since a video is
just a collection of still images played in order, the canvas is updated in an animation loop, which draws
the current frame of the video. In this document, the
canvas
element is set to the same dimensions as the
sample video in order to display the entire frame; you may need to adjust this depending on the size of
your video. Here's the code (
12-video-frames.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Frames</title>
<link rel="stylesheet" href="style.css">
<style>
#movieclip {
display: none;
}
</style>
</head>
<body>
<canvas id="canvas" width="640" height="360"></canvas>
<video id="movieclip" width="640" height="360" autoplay>
<source src="movieclip.mp4" type="video/mp4"/>
