Quiz - The Essential Guide to HTML5 - page 191

This makes the player start over with a new move if she clicks twice on the same block. Since the block
will change back to white, this should be clear to the player.
Presenting video
HTML5 provides the new video element for presenting video, either as part of a static HTML document or
under the control of JavaScript. This may well become the new standard. For more information, see Silvia
Pfeiffer's The Definitive Guide to HTML5 Video (Apress, 2010).
In brief, video comes in different file types, just like images do. The file types vary based on the
containers for the video and the associated audio, as well as on how the video and the audio are encoded.
The browser needs to know how to handle the container and how to decode the video to display the
frames—the still images making up the video—in succession on the screen, and how to decode the audio
to send the sound to the computer speakers.
Videos involve a considerable amount of data, so people still are working on the best ways to compress
the information, taking advantage, for example, of what is similar between frames without losing too much
quality. Web sites are now displayed on small screens on cell phones as well as large high-definition TV
screens, so its important to take advantage of any knowledge of what the display device will be. With this
in mind, though we can hope that browser makers standardize on one format in the future, the HTML5
video element provides a way to work around the lack of standardization by referencing multiple files.
Developers, therefore, and that includes those of us creating this quiz application, need to produce
different versions of the same video.
I downloaded a Fourth of July fireworks video clip and then used a free tool (Miro video converter) to
create three different versions with different formatting of the same short video clip. I then used the new
HTML5 video element as well as the source element to code references to all three video files. The codecs
attribute in the source element provides information on what the encoding is for the file specified in the src
attribute.
<video controls="controls">
<source src="sfire3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="sfire3.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'">
</video>
Including controls="controls" puts the familiar controls on the screen to allow the player/user to start
or pause the video clip. This code, as part of a standard HTML document, produces what is shown in
Figure 6-8.