HTML and CSS Reference
Next, you'll need to include some attributes to customize the video experience for your particular use case. In the
following example, I've included a source, a height attribute, and a width attribute:
<video src='yourVideoFile.mp4' height='640' width='360'></video>
By writing this, I've instructed the browser to render an HTML5 video element to play back the file
yourVideoFile.mp4 at the dimensions 640x360. If you want to include video controls, you simply add another
attribute by writing the following:
<video controls src='yourVideoFile.mp4' height='640' width='360'></video>
The browser will now render the player's controls. Otherwise, you can keep the controls hidden and create your
Obviously, this method is much more streamlined than the Flash-based example.
Let's first take a look at the markup that drives HTML5 video and deconstruct its syntax, and then I'll get into the
nitty-gritty of development. Consider the code in Listing 7-2.
Listing 7-2. HTML5 Video Playback Example
<source src="sample.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src=" sample.webm" type='video/webm; codecs="vp8, vorbis"' />
The preceding code uses the new HTML5 video tag along with the necessary source tags, which allows the browser
to call on the supported video file. Ideally, there would be one supported file format that every browser can handle. If this
were the case, having the video's source inline would work as well, as demonstrated in the following example:
It's important to make sure that the server hosting and delivering your files has the correct MIME type set to
deliver the file format for each video file. Also, be sure to specify the type attribute so the user's browser doesn't
download files it cannot play. Essentially, dictating a type with a MIME type and codec allows the browser to
effectively choose which file it needs.
So, you may be asking, “What happens if my advertising campaign needs to reach the widest audience possible?
Including support for older IE versions?” Simply, you really have two options: either use Google's Chrome frame or
have a Flash failback.
Google's Chrome frame injects a Webkit rendering engine inside IE browsers, which gives you the ability to
render HTML5 content inside the older IE environments. Alternatively, having a Flash failback will allow your users
to have HTML5 video first, and in the event the video tag isn't supported, the previous method will be used via the
object tag for a SWF file.
HTML5 video is a great advancement to the browser. The video element supports an array of features and
attributes, and support within the current browser market is almost stable. However, as with all emerging things, it
can have a few inconsistencies, and it doesn't stop at the video element itself for its fragmentation. Support across
browsers, screens, and devices requires a multitude of source video files to actually play back the video asset from
within the HTML5 video tag. As you may have guessed, it takes some time and money to create, size, transcode, and