VIDEO - HTML5 - page 212

MAKING AN HTML5 PAGE WITH VIDEO
To get started with video, you need a video i le. You can create one on your computer, or you
can download one from the Web. So the question is: What kind of video i le? h e Tower of
Babel made more sense than all the video codecs do, so this section begins with the most
ubiquitous of all current video formats, H.264. As a video format, H.264 is usually referred as
MPEG-4 or its i le extension, .mp4 . h is video format gained popularity as the i rst high-
dei nition video format for the Web. Most people i rst saw it playing on the Web as a Flash
.f4v i le, and the results were much better than previous Web video.

h e key tag used in video is, to no one's amazement, <video> . Just as with an image or
audio, the i rst attribute that you need is a source, and the src attribute is used to identify
the source. So, creating Web pages with video is quite simple. h e following listing
( SimpleVideo.html in this chapter's folder at www.wiley.com/go/smashinghtml5 )
displays video basics in an HTML5 Web page.

<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Simple Video </ title >
</ head >
< body >
< video src = ”mbAux1small.mp4” controls preload = ”auto” ></ video >
</ body >
</ html >

216

In order to test and run this i le, you need a Safari browser because, at the time of this writing,
that's the only browser that it works with. (h e browser is free, so go ahead and try it.)

When you run the program, you'll see your video play on the Safari browser. h e way the
controls are set up, you'll have to wait until you see an image, which means the video is ready.
Click the start arrow on the controller and you should see your video play. Figure 11-1 shows
what you can expect to see if you play and pause the video.

Obviously, you're going to want your video to play on more than one browser. If your video
can be viewed using only a single browser, you're going to miss a lot of users. Fortunately,
HTML5 has a simple way of solving the problem. Within a <video> container, you can add
as many <source> tags as you want. h e source attribute ( src ) is moved to the <source>
tag. If you place several <source> tags in the <video> container, the browser will look at
the video i les and select the one it knows how to play and automatically play it. If it can play
more than a single type of video format, it starts playing the i rst one it recognizes and ignores
all the rest. All this can be done using HTML5 without having to break out JavaScript. h e
following snippet shows the basic format of accessing video i les in this manner:

< video >
< source src = ”someVid.3gp” >