If you haven’t had a good reason to learn HTML5 video, let me give you one: Flash mobile is dead. Mobile is the new black, many people say that by 2014 more people will be browsing with their mobile device than using a desktop. You know, if we get through 2012 of course. So more then using CSS media queries and cool coding tricks, you need to be ready to switch also the way you post videos online.
Now you may be asking yourself if it’s hard to implement HTML5 video, or if it’s worth the effort. Well, dear friend, it’s way easier than you think.
We’ll see today a few different ways you can implement it, and a few more things that you should be aware of.
So, let’s rock!
<video> tag works
Before HTML5 we used
<object> tags to do this stuff. Don’t know if you’ve had the pleasure of trying to get this working, but I can assure you, it can cause quite the headache.
As you may notice, they are using external sources to process this content. External sources mean plugins, and they’re not always 100% compatible with your default content (how many times have you seen a flash banner above content that it shouldn’t be?).
The video tag is quite simple, you’ll show it which sources it can use, and if it can’t read these sources it’ll show your alternative message:
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Bad news, you can't see the amazing stuff that is here. </video>
Here you’ll need sources as .mp4, .mp3, .ogg, .webm., and if you don’t have any of these formats there are a lot of html5 video converters out there for you to use.
You’ll need different file types because Firefox (3.5+), Opera(10.5+) and Chrome(5.0+) support .ogg but Internet explorer(9.0+) and Safari(3.0+) support .mp4.
Ok, then the good thing is that you don’t need to ask your users to switch to a different browser in order to see your content. You can use a few alternatives to make sure that your users see your videos. We’ll get to those alternatives soon. For now, let’s see now how we can improve this video thing.
New to HTML5?
If you are new to HTML5, or if you want to improve your knowledge of it, then we highly suggest grabbing a copy of our HTML5 e-book which covers the basics of HTML5 and its elements!
Pretty video players
Of course you don’t need to rely on default player controls for the video tag. Actually you can do seriously cool stuff (like applying CSS effects, canvas playing & more) with your video content on the fly, but we’ll see more about this soon.
Here’s how a custom video player is made. Dev.Opera has a great tutorial on this and we’ll outline a few things that you can do.
How this custom controls thing works
Once our video is loaded we’ll use jQuery to remove its default controls and append our own HTML controls on it. Then jQuery will control all attributes we need, like readyState (if video is being played), duration (so we can use a slider), currentTime (so we can show how much time has played), and volume controls.
After doing JS you’ll see that video controls can easily be themed and changed via CSS, as it should be at first place, right?
Source: Opera Tutorial
Ok, ok, let’s do it the smart way
We have a lot of plugins to help us in this process. Let’s see a couple of them:
WordPress Plugin – HTML5 and Flash Video Player
With it you can easily add videos the old flv way, or cool HTML5 with flash fallback, with shortcodes: [videoplayer file="video/video.flv" /] or [videoplayer file="video/video.mp4, ogg, webm" /]
Make an HTML5 video a background with jQuery.VideoBG plugin
Crazy thing! You can add a video to your background, and it gives a pretty cool look, indeed.
Good looking video player with ttwVideoPlayer jQuery Plugin
One of the bests video players I’ve even seen. It looks pretty good, and has nice features.
All in one solution with jPlayer
Take a look at their first demo and you’ll see that isn’t just another jQuery video plugin. It allows you to enhance the default players behaviors in ways that I can only imagine normally doing with flash. Circle player is pretty crazy, check it and see what I’m talking about!
One last good reference – Html5video.org
It has good insights about video tag, news section, players comparison.. well, good things to know about HTML5
Now it’s your turn!
So, have you ever used this? What do you think about?
Do you know about another tool that can help us and is missing here? Let us know!