The <video> element shares a number of the same attributes as the <audio> tag, and a fair amount of the same caveats as well. An allegorical licensing / format dispute is again instigating cross-browser compatibility issues, and may be resolved using the same multiple-source fix. Once again, there is no single video codec that will work with all HTML5 compliant browsers at the time of this writing.

While there are no official video codecs specified for HTML5, we’ll be covering the two most common formats that find browser support: Our old friend Ogg, and its pay-for-play peer H.264/MPEG-4. Utilizing both codecs, one should be able to effectively cover their compatibility bases, and comfortably include video elements that are visible amongst all modern browsers. There are many more supported, but in the interest of brevity, these two should do nicely.

< video > Syntax Formatting

As you can see, the syntax for the < video > tag works much in the same way that it did for < audio > tag. You specify your sources in the same manner, and the above is all that is necessary to add a video element to an HTML5 document.

< video > Attribute Examples

#controls

Here too, you’ll probably want to include the controls attribute to lend some interactivity to your video clip. Again, this is added by the browser itself, and will vary in appearance slightly.

Let’s give it the old college try, shall we? And this time, we promise to leave you in slightly less debt. Create a new HTML5 page, as we often do here, and make the following additions:

We’ve useda sample movie trailer for illustrative purposes, both in the .mp4 and .ogg formats, which come courtesy of the Creative Commons open-movie project “Big Buck Bunny”. And once again, our default text is served up for non-compatible browsers. As was stated earlier, inclusion of both of these formats should ensure that the trailer will be visible in all major modern browsers. As we could not include the video with our project, you will want to download a sample video to test this out for yourself.

Save out, and have a look:

#height and #weight

The primary difference between the media tags are the sizing attributes available to the < video > element. As with the < img > tag we examined earlier, you may adjust the video size as rendered in the browser, although you’re usually better off sizing your video file appropriately. Reducing the video size in your HTML5 document means you’re using a file that’s larger (in byte size) than is probably needs to be, and enlarging could result in some rather ugly pixilation effects. You’ve also got proportions to worry about.

There is, however, one very valid exception. A number of browsers enable the user to switch to a “full screen” mode, which displays only the video at full screen. If it’s likely that the end user will want this option, you’re better off using a full-size version of your video file, and resizing in the document to fit with your layout.

To see this in action, append your < video > tag to include the following:

#autoplay

The video autoplay element is somewhat more acceptable than its non-visual counterpart, especially if it’s clear that you’re linking to a video clip. Obviously, if you have 10 clips on a single page, it’s beyond a terrible idea. But as far as acceptable practices, it fares much better than throwing unexpected audio directly into people’s faces. As a general rule, if the page is about the video clip, you’re probably in the clear.

#loop

Just as with audio, if you’d like your video to auto-repeat, you may do so. Traditionally speaking, this is not a preferred method of presentation, unless of course you’re getting intentionally torturous with your home movie collection.

#preload

By default, the < video > tag will initiate playback before the audio file has completely been downloaded. If for some reason the internet connection were to drop, or suffer a sudden reduction in access speed, playback may be interrupted or stopped completely. If you’d prefer the entire video to be downloaded before playback starts, you may specify that preference with the preload attribute.

And there you have it. For all the coverage these two new elements have collectively attained, they’re actually quite easy to use, provided you keep in mind the shortcomings of early adoption, and don’t mind doing the additional requisite file conversions. You shall be rewarded for your extra efforts. (Starting right now. With me. No longer talking to you like a fortune cookie.)

Download Source Files