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!

Before HTML5 we used <embed> or <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:

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.

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.

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

We have a lot of plugins to help us in this process. Let’s see a couple of them:

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" /]

Crazy thing! You can add a video to your background, and it gives a pretty cool look, indeed.

One of the bests video players I’ve even seen. It looks pretty good, and has nice features.

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!

It has good insights about video tag, news section, players comparison.. well, good things to know about HTML5

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!