HTML5 and CSS3, Second Edition

Tip 21

Tip 21. Embedding Video

AwesomeCo wants to showcase its new series of training videos on its website,

and it wants the videos to be viewable on as many devices as possible, espe-

cially on the iPad. As a trial, we’ve been provided two videos in the “Photoshop

Tips” series, which we’ll use to build a prototype. Thankfully, we’ve been given

the video files in H.264, Theora, and VP8 formats, so we can focus on creating

the page. (If you want to learn more about encoding your own video files,

check out Appendix 3, Encoding Audio and Video for the Web, on page 273.)

The <video> tag works exactly like the <audio> tag. We just need to provide our

sources, and Chrome, Firefox, Safari, Safari on iOS, and Internet Explorer 9

display the video without any additional plug-ins. The markup for our first

video file, 01_blur, looks like this:

html5_video/native.html

<article>

<header>

<h2>SaturatewithBlur</h2>

</header>

<videoid="video_blur"preload="auto"controls

width="640"height="480">

<sourcesrc="video/h264/01_blur.mp4" type='video/mp4'>

<sourcesrc="video/theora/01_blur.ogv"type='video/ogg'>

<sourcesrc="video/webm/01_blur.webm" type='video/webm'>

<p>Yourbrowserdoesnot supportthe videotag.</p>

</video>

</article>

We define the <video> tag and tell it that we want it to show playback controls.

We use the preload attribute to tell browsers to attempt to load the video in the

background, and we implicitly tell it that it should not play automatically by

not including the autoplay attribute.

Within the <video> tag, we define each video source with the <source> tag, and

we specify its type. The browser will play the file type it understands, but we

have to provide the proper format for that browser. If we only provided the

MP4 format, then browsers that support the <video> tag but don’t support

MP4 files would just show the user a blank video player.

report erratum • discuss

Embedding Video • 141

Download from Wow! eBook <www.wowebook.com>