Crash course: HTML 5 video

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

MIME Types

File

MIME type

Extension

Theora

video/ogg

.ogv

H.264

video/mp4

.mp4

WebM

video/Webm

.Webm

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.

Conclusion

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

Essentials

Microsoft L5V-00027 Sculpt Ergonomic Keyboard Desktop

Learn more >

Lexar® JumpDrive® S57 USB 3.0 flash drive

Learn more >

Mobile

Lexar® JumpDrive® S45 USB 3.0 flash drive 

Learn more >

Exec

Lexar® JumpDrive® C20c USB Type-C flash drive 

Learn more >

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

Learn more >

HD Pan/Tilt Wi-Fi Camera with Night Vision NC450

Learn more >

Audio-Technica ATH-ANC70 Noise Cancelling Headphones

Learn more >

Budget

Back To Business Guide

Click for more ›

Most Popular Reviews

Latest News Articles

Resources

PCW Evaluation Team

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Aysha Strobbe

Windows 10 / HP Spectre x360

Ultimately, I think the Windows 10 environment is excellent for me as it caters for so many different uses. The inclusion of the Xbox app is also great for when you need some downtime too!

Mark Escubio

Windows 10 / Lenovo Yoga 910

For me, the Xbox Play Anywhere is a great new feature as it allows you to play your current Xbox games with higher resolutions and better graphics without forking out extra cash for another copy. Although available titles are still scarce, but I’m sure it will grow in time.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?