HTML and CSS Reference
In-Depth Information
CHAPTER 6
Mixing HTML5 Video and Canvas
Using the new
<video>
tag, HTML5 lets sites show video directly in HTML without
needing any plug-in technologies. However, the simple
<video>
tag opens up a whole
slew of complexities and opportunities for developers. While we can't cover everything
related to video in this chapter, we will introduce you to the HTML5
<video>
tag, and
then show you ways in which video can be incorporated and manipulated by HTML5
Canvas.
HTML5 Video Support
HTML5 specifies a new tag,
<video>
, that allows developers to place video directly in
an HTML page. With a few simple options, you can autoplay, loop, and add playback
controls to the embedded video.
First, let's talk about video format support, which is a very complicated issue. Some
video formats are free, and others are licensed. Some formats look better than others,
some make smaller file sizes, and some are supported in one browser while others are
supported in a different browser. In this chapter we will concentrate on three formats
that either have broad support now or promise to have broad support in the fu-
ture:
.ogg
,
.mp4
, and
.webm
.
We will discuss these video formats in terms of
video codecs
. Each format uses one or
more
codecs
to compress and decompress video. Codecs are usually the secret sauce of
a video format because compression is the key to making video that, in the wild, can
convert very large files into file sizes that can be easily transported on the Internet.
