Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
By now, if you have any interest in web design at all, you've probably gotten caught up in one discussion or another over video for the web. Now, until recently, the only way to view video online was through a third-party plug-in. Although there are many plug-ins used to view video on the web, like QuickTime, Real Player, and Silverlight, most people were referring to Flash when the HTML5 native video versus plug- in video debate comes up. Now, that's because until recently Flash had almost an unchallenged dominance in the online video market. Its lightweight nature and robust capabilities make Flash a pretty compelling choice for delivering online video.
With the advent of HTML5 however, developers now have another choice to make when deciding how to deploy video over the web. Now, I want to make the point very early on, this movie is not an HTML5 video versus Flash video comparison. There are dozens of passionate articles and blog posts arguing on both sides of the debate available online for your viewing pleasure. Rather, in this movie, I want to explore the rationale behind HTML5 video support and talk about the current landscape of HTML5 video. Later on, we'll build our own HTML5 video player for our Explore California Trail Guide page.
Now, due to the almost ubiquitous nature of video online, it seems natural that the evolution of the HTML standard would include support for playing video natively in the browser. This would free developers from worrying about plug-in support, versioning, or complicated deployment scripts to assure cross-browser compliancy. Now to that end, the HTML5 specification contains the video element. If you want to put video in your page, all you need to do is something like this. That's it. No muss, no fuss.
When the user opens the page in the browser, the video is just there and ready to play. Awesome, right? Yeah, well, almost. As with most things, it's never really that simple. An HTML5 video is not without its issues. The main issue surrounding HTML5 adoption at the moment is support. Currently, the HTML5 specification is agnostic about which type of video file browsers should support. In a perfect world, this would allow the designer to choose from multiple video types based on their needs.
In the very real world of patents and trademark laws, this has created a bit of a mess. Now, as browsers began to add support for HTML5 video, they began to choose sides regarding which video codecs to support. Due to its high quality, the H.264 codec seemed to be a logical choice for online video. It was immediately backed by both Microsoft and Apple as their choice for HTML5 video. Now, Firefox and Opera, on the other hand, both backed the Ogg Theora format, out of licensing fears.
Although the quality of the Theora codec isn't quite as good as the H.264 codec, it is open source, whereas the H.264 codec is covered by patents, which could create licensing issues in the future. Especially if the patent holders choose to change the patent agreements in the future, as soon as the ones they have now run out. Now, Apple and Microsoft dismiss these concerns and they respond by pointing out that they're worried that the Ogg Theora codec might be vulnerable to patent challenges from other patent holders. Even though it's open source, they are saying hey, some of what's in the codec could be bought to suit by other patent holders claiming infringement.
Now, Google took the very unusual position of supporting both file types and has recently created even more of a stir by releasing their own VP8 codec as open source. Now, the VP8 codec is a great codec, it's open source now, and it seems to solve the quality problems that the Theora codec presented, and the patent issues that the H.264 presents. You following along with me now? Now, Mozilla has quickly jumped to the support of the VP8 format and is even pushing to have it added to the HTML5 specification as the standard format for HTML5 video.
As you can tell, the HTML5 video space is far from finalized. So where does that leave us? Currently, Firefox, Chrome, and Opera support the Ogg Theora codec, Safari supports the H.264 codec, Chrome supports both the H.264 and Ogg Theora codec, and future versions of Firefox, Opera, Chrome, and Internet Explorer will all support the WebM VP8 format. So the VP8 codec is wrapped in a WebM file type. Now, Internet Explorer 9 is also going to support the H.264 codec as well. You got all that? So what does it mean for you when you are trying to decide which video format to use? Well, it means for the time being you're going to need to support several video formats, as well as possibly adding fallback content to plug-ins like Flash for older browsers.
If that doesn't sound like fun to you, it's not. There are however some ways to make life easier for yourself. Video.js is an open source library designed to make cross-browser video support easier. It supports H.264, Ogg Theora, WebM, and creating fallback support for Flash. kaltura.org is an open source community dedicated to video for the web. They've released the HTML5 Media Library, which is another open source library that makes it easy to create cross -browser compliant video players.
You can skin them, add subtitles, and even provide fallback support for Flash and older browsers. Now, if you want to learn more about video codecs and their support in HTML5, I again recommend Mark Pilgrim's excellent chapter on video in his Dive Into HTML book, which is available online. The Mozilla Development Center has a nice article about using video in Firefox, which includes documentation on controlling the video as well. After all of that, I can imagine that you're really excited about getting started with video in HTML5. So in our next movie, we are going to tackle that by taking a look at encoding video for the web.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99077 Viewers
56 Video lessons · 112363 Viewers
71 Video lessons · 81191 Viewers
131 Video lessons · 38996 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.