How to Build an HTML5 Video Player, from VideoJS's Creator
Learn from the best: at the recent Streaming Media East conference in New York City, Steve Heffernan, creator of the widely used VideoJS player, explained how to build an HTML5 player from scratch. Heffernan started by explaining the evolution of online video.
"Someday I do see HTML5 video as being the primary playback technology for video on the web and mobile devices. We started with -- early on in video we had to support multiple plug-ins, like RealPlayer and QuickTime to get all of our viewers to be able to see the video," said Heffernan. "Then Flash came on the scene and we had that one plug-in that we could use to reach the majority of our users, which was awesome."
Plug-ins are still used, but their time is ending.
"Now, what's happening is we're moving away from the need for plug-ins. The browsers have basically agreed on the right way to provide video in a browser, and they're building that ability right into the browsers. So, what you're going to have is the next generation of web developers who are all learning HTML and JavaScript, they're going to default to that as their first resort for playing video in the browser," continued Heffernan. "But, I do see Flash sticking around. There's still a number of use cases where Flash can be beneficial, especially right now where HTML5 is limited in areas like DRM and things like that."
To watch the full lesson, click the video below. Be sure to download a PDF of Heffernan's presentation.
HOW-TO: Building an HTML5 Video Player
This live coding session demonstrates 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
Related Articles
HTML5 with MSE lets publishers stream video to newer browsers with no plug-ins required. This presentation explains how to get started.
21 Apr 2015
This guide explains the many options and features available for video playback, and details the coding required to create video players for any platform.
02 Apr 2015
Learn the essentials for creating H.264 and WebM video with this presentation (naturally, there's a little more emphasis on H.264 than WebM).
14 Feb 2013
Want to roll your own HTML5 player? Here's what you need to know to get started.
02 Mar 2012
Player offers a common API for HTML5 and Flash, letting developers write for HTML5 and get results in both platforms.
19 Jan 2012