Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005. But it wasn’t until the release of HTML5 that web developers have had a lightweight solution to playing the video. In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video. This was one more thing that would weigh down your site, causing pages to load slower, and be one more thing you’d have to trust the viewer to download and install.
Handling a video with HTML5 can be as simple as this.
<video src=”videos/myMovie.mp4” controls></video>You’ve got the source and have added the browsers native controls. That’s approximately 41 less lines of code than a site I recently worked on that was using a Flash player, not to mention the player itself had a fairly bulky file size.
Flash and Java Video Players
One big advantage that Flash and Java video players have over the new HTML5 video element is that they’re able to stream live video. The HTML5 video element is still in its infancy and as of now is not able to stream any sort of live video feed. Another major advantage that a Flash of Java video player has over HTML5 is that they can handle 3D effects. This could be a major factor in preventing HTML5 video players from taking away a large amount of market share from Flash and Java players. As we’re seeing an influx of films coming out in 3D, as well as major sporting events being broadcast in 3D, the ability to handle 3D and streaming content is becoming a more crucial requirement for a video player. Add the growing number of people who choose to stream movies or TV shows from sites like Netflix, Hulu, or YouTube, and the demand for a powerful, robust video player grows even more.
One of the downsides to having a Flash video player, aside from file sizes and it being an add-on that the viewer must install, is that Flash is not compatible with Apple tablets and mobile devices. With Net Applications announcing iOS grew to owning 61.6% of the mobile market share in the month of October, that appears to be a big down side. Especially when you consider more people opt to browse websites from their mobile device or tablets instead of using their computer.
Java players gain their biggest edge over Flash players by being compatible with the iPhone, iPad, and iPod touch. The reason behind Apple’s decision not to support Flash stems from Flash being a “closed” system, meaning that Adobe Flash products are only available from Adobe and Adobe controls the future of the product in regards to upgrades and pricing. This is opposed to Java, which is an “open” programming language. Downsides to a Java video player are very similar to that of Flash as well, larger file sizes, and the need for the viewer to install a plug-in for their browser to display the video.
HTML5 Video Element
We’ve already established that an HTML5 video player can mean you have a substantially smaller file size, but as with Flash and Java, HTML5 has its advantages and disadvantages. An HTML5 video player will also be cross-browser friendly and work on Apple products. However, just because you’ve implemented an HTML5 video player on your site does not mean that the video will play on an Apple product. This is an issue I pointed out with a recent client; they wanted to switch their site from a Flash video player to HTML5 so that it would play on an iPhone or iPad. It was at this point I had to point out that their video formats were in FLV, a video compressed with Flash.
To accommodate anyone who might be viewing your site from an Apple mobile device or tablet there are some video compression guidelines you will want to follow. An iPhone will play MPEG-4 videos or QuickTime videos that were compressed with MPEG-4, meaning H.264 video and AAC audio. It’s also worth noting that the iPhone does not support B-Frames. If you’re given the option of encoding your video in a multi-pass or single-pass mode, choose single, even though you will most likely be encouraged to do multi-pass for best quality. I’ve found that 480×360 dimensions is a nice median to accommodate full screen on a computer without distorting the image too much, and not ending up with a file so large it takes too long to load on an iPhone.
HTML5 will also allow you to name multiple video sources, OGG, MPEG-4, and WebM. OGG is compatible with Firefox 3.5+, Opera 10.5+, and Chrome 5.0+, but not IE or Safari. MPEG-4 is supported by IE 9.0+, Chrome 5.0+, and Safari 3.0+, but not Firefox, or Opera. While WebM is supported by Firefox 4.0+, Opera 10.6+, and Chrome 6.0+, but not IE or Safari. Being able to point to multiple sources will ensure that your video is able to play on any major browser, with the only downside being you to have multiple formats of your video.
Pointing to multiple video sources is as easy as one might think, “just include the source for each”.
<video controls>
<source src=”videos/myMovie.mp4” type=”video/mp4” />
<source src=”videos/myMovie.ogg” type=”video/ogg” />
<source src=”videos/myMovie.webm” type=”video/webm” />
</video>Moving Forward With <video>
Some might say that the <video> element is too little too late, but using HTML5 to display a simple static video on your site is a perfect way to ensure viewers to your site will be able to see it, whether it’s on a mobile device or a desktop computer. It’s lightweight and requires no additional plug-in to work. As with all new technologies you have to start somewhere, and from there you begin to see areas in which it can be improved. Being someone who strives to develop as lightweight of sites as possible, I am excited to see what direction the new HTML5 video element goes.
