Crash course: HTML 5 video

So you want to add HTML 5 video to your site? Here's how.

MIME Types


MIME type











Falling back to Flash

So what happens if the page is accessed by users who don't have VIDEO tag support in their browsers? For them, you'll need to provide a way to allow the page to serve up a Flash-encoded version of the video. The good news is that there's a way to do this that is a legitimate behavior of the VIDEO; tag, not a byproduct of some other behavior or a browser-specific quirk.

The way this works is fairly clever: The Flash object is embedded within the VIDEO; tag itself. If the browser supports VIDEO, it attempts to use a stream from the VIDEO tags. If none of those work, the OBJECT tag that points to a Flash player is invoked, and the other elements are automatically ignored.

For an example of this, check out a template called Video for Everybody, created by the folks at Camen Design. It not only falls back elegantly from HTML 5 to Flash but will also work in HTML 4 by degrading to Flash as a fallback, too.

Other third-party packages serve up the VIDEO tag in different sauces of HTML 5, JavaScript or Flash, depending on what additional effects you want to invoke. For example, the Projekktor project lets you embed a fairly advanced media player in a Web page with all sorts of extensions -- such as the ability to refer to an existing YouTube video. HTML 5 is used by default, but Flash works as a fallback when needed. Projekktor's code is GPL2-licensed, so it can be used and redistributed freely as-is.

Note that you have to supply the Flash player yourself: You can't just tell Flash to stream a video file. On the plus side, the current edition of Flash streams H.264 natively, so if you already have an H.264 encode you can simply re-use that.


The biggest obstacle the VIDEO tag faces is how each browser chooses to implement it -- what codecs are supported and how they're presented to the end user. It's all in flux, and that means any current implementation might change as the browsers themselves evolve over the next revision and beyond.

It's likely that we'll see two tiers of content that use the VIDEO tag: H.264-encoded content hosted by professional services and portals, such as YouTube and Vimeo, and open-standards content encoded in WebM and Theora, hosted wherever there's bandwidth and space to spare.

The important thing is that they'll exist side by side, powered by the same in-browser technology. If one does emerge as the standard, if only in a de facto fashion, it won't be for lack of competition.

Serdar Yegulalp has been writing about computers and information technology for over 15 years for a variety of publications, including InformationWeek and Windows Magazine.

Join the PC World newsletter!

Error: Please check your email address.

Tags Internet-based applications and serviceshtml5internetvideo

Our Back to Business guide highlights the best products for you to boost your productivity at home, on the road, at the office, or in the classroom.

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Serdar Yegulalp

Computerworld (US)
Show Comments

Cool Tech

D-Link PowerLine AV2 2000 Gigabit Network Kit

Learn more >

D-Link TAIPAN AC3200 Ultra Wi-Fi Modem Router (DSL-4320L)

Learn more >

Lexar® Professional 1000x microSDHC™/microSDXC™ UHS-II cards

Learn more >

ASUS ROG Swift PG279Q – Reign beyond virtual world

Learn more >

Xiro Drone Xplorer V -3 Axis Gimbal & 1080p Full HD 14MP Camera

Learn more >

Crucial® BX200 SATA 2.5” 7mm (with 9.5mm adapter) Internal Solid State Drive

Learn more >

Gadgets & Things

Lexar Professional 2000x SDHC™/SDXC™ UHS-II cards

Learn more >


Learn more >

Lexar® Professional 1000x microSDHC™/microSDXC™ UHS-II cards

Learn more >

Family Friendly

Lexar Professional 2000x SDHC™/SDXC™ UHS-II cards

Learn more >

ASUS VivoPC VM62 - Incredibly Powerful, Unbelievably Small

Learn more >

Lexar® Professional 1000x microSDHC™/microSDXC™ UHS-II cards

Learn more >

Stocking Stuffer

Lexar® Professional 1000x microSDHC™/microSDXC™ UHS-II cards

Learn more >

Lexar Professional 2000x SDHC™/SDXC™ UHS-II cards

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Best Deals on PC World

Latest News Articles


GGG Evaluation Team

Kathy Cassidy


First impression on unpacking the Q702 test unit was the solid feel and clean, minimalist styling.

Anthony Grifoni


For work use, Microsoft Word and Excel programs pre-installed on the device are adequate for preparing short documents.

Steph Mundell


The Fujitsu LifeBook UH574 allowed for great mobility without being obnoxiously heavy or clunky. Its twelve hours of battery life did not disappoint.

Andrew Mitsi


The screen was particularly good. It is bright and visible from most angles, however heat is an issue, particularly around the Windows button on the front, and on the back where the battery housing is located.

Simon Harriott


My first impression after unboxing the Q702 is that it is a nice looking unit. Styling is somewhat minimalist but very effective. The tablet part, once detached, has a nice weight, and no buttons or switches are located in awkward or intrusive positions.


Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?