▼ Scroll to Site ▼

How to Build an HTML5 Video Player

Article Featured Image

HTML5 has potential. That was the message of Steve Heffernan's introduction to the How To: Building an HTML5 Video Player demonstration at Streaming Media East, and it was likely the funniest introduction from the entire conference.

Heffernan, creator of the VideoJS player, spoke of a day coming soon when HTML5 video will be dominant. "Eventually we do see it becoming the standard way to play back video in the browser," he said.

"Right now, it's got some issues."

But that doesn't mean you should put off learning how to use it.

"As the majority of our users support HTML5, as there are less bugs to work out, it'll become the standardized way to playback video. If you think about the next generation of developers, they're not going to want to learn Flash to just put a video on the page. They're going to want to use the technology that they're used to using, which is HTML5 and JavaScript," said Heffernan.

Offering some statistics, Heffernan said that today 53 percent of users can view HTML5 video, up from 38 percent last year. The adoption of Internet Explorer 9 will grow that number dramatically.

To view the rest of Heffernan's talk, including the reasons to use HTML5 video (hint: Apple iOS support is the big one) and the formats involved, and to see his co-presenter Jeroen Wijering (creator of the JW Player) dive into the code, view the video below. You can also download the presentation materials here.

How To: Building an HTML5 Video Player

This live coding session will demonstrate how to develop from scratch your own interface for HTML5 video, including embedding a video using HTML5, building custom controls using the JavaScript API, fallback strategies for older browsers and devices, and fixing known playback bugs on the iPhone and Android. By the end of the session you should feel comfortable adding HTML5 video to your own site.

Speaker: Steve Heffernan, Creator, VideoJS
Speaker: Jeroen Wijering, Chief Digital Architect, LongTail Video

Streaming Covers
Free
for qualified subscribers
Subscribe Now Current Issue Past Issues
Related Articles

How to Build Online Video Players

This guide explains the many options and features available for video playback, and details the coding required to create video players for any platform.

Jeroen Wijering Demystifies HTML5 Video at the HTML5 Video Summit

The JW Player creator talks through HTML5 basics, explaining what it is and why it's useful.

Video.js Is Updated, Developers Write Once for HTML5 and Flash

Player offers a common API for HTML5 and Flash, letting developers write for HTML5 and get results in both platforms.

HTML5 Video: Challenges Facing an Open-standards Web

There's a lot of potential in HTML5 video, but its final form is still being decided. Learn about the obstacles it needs to face.

What HTML5 Video Can Offer Businesses

HTML5 offers a lot of promise, just not what everyone thinks. To get the real scoop on what it can do, watch this Streaming Media East presentation.

How to Use Flash to Simplify Multi-device Video Delivery

The product manager for Flash Media Server explains how to use Flash to stream video to a fractured device landscape.

HTML5 Encoding Secrets

After viewing this video, video publishers will have all the information they need to encode and stream to HTML5 browsers.

Debunking HTML5 Video Myths: A Guide for Video Publishers

HTML5 video might be getting all the attention, but video publishers who want to serve the widest possible audience should make it the format of last resort. A presentation from Streaming Media East 2011 attempts to burst HTML5 video's balloon.

Ten Tips for Getting Your Video Content on as Many Devices as Possible

Here are ten quick suggestions to help make sure your video content plays on (almost) every device

What Is HTML5?

An explanation of HTML5 and HTML5 Video, including history, patent issues, and current use by Apple, Microsoft, Google, Adobe, and others.