Total Followers 132,503
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 worksBefore 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:
<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.
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!
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!
Get The Only Freelancer crash course you will ever need to read!
I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/
Saturday, March 3rd, 2012 12:41
It’s good know that Flash will be unsupported and want learn it few months ago.
Dont’ know that one of HTML5′s feature is the improvement in the video tools.
Thanks for info.
Monday, December 5th, 2011 20:25
Another great post Rochester. HTML5 is going to dramatically change the way we design and develop websites. I really do believe that Flash will come to an end very soon.
Tuesday, December 6th, 2011 13:48
Hi there!
Thanks, specially the “another” part ;)
[]‘s
Saturday, December 3rd, 2011 04:05
Good Info.
Will try these tutorials
Thanks
Friday, December 2nd, 2011 22:06
nice post, mediaelementjs works pretty well for me though
Saturday, December 3rd, 2011 05:00
Thanks David!
Hope you enjoyed other tools shown here :)
[]‘s
Friday, December 2nd, 2011 16:42
With Flash you only need one video format, with HTML 5 you need at least 3? I guess that we are going backwards…
Saturday, December 3rd, 2011 04:58
Hey Ken!
As I said, HTML5 gives you full control over video content (you can, for instance, apply effects on the fly on it, just to mention one cool feature). And, as I said, flash mobile is dead. 200% of great developers are switching to HTML5, I guess there are good reasons for it :) .
BUT, nothing that I’d say here would change you mind, I guess. So good luck with flash.
[]‘s
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Ken
Friday, December 2nd, 2011 16:42
With Flash you only need one video format, with HTML 5 you need at least 3? I guess that we are going backwards…
Rochester Oliveira
Saturday, December 3rd, 2011 04:58
Hey Ken!
As I said, HTML5 gives you full control over video content (you can, for instance, apply effects on the fly on it, just to mention one cool feature). And, as I said, flash mobile is dead. 200% of great developers are switching to HTML5, I guess there are good reasons for it :) .
BUT, nothing that I’d say here would change you mind, I guess. So good luck with flash.
[]‘s
David Jones
Friday, December 2nd, 2011 22:06
nice post, mediaelementjs works pretty well for me though
Rochester Oliveira
Saturday, December 3rd, 2011 05:00
Thanks David!
Hope you enjoyed other tools shown here :)
[]‘s
Phillip
Saturday, December 3rd, 2011 04:05
Good Info.
Will try these tutorials
Thanks
Rochester Oliveira
Monday, December 5th, 2011 14:53
Thanks Phillip, I’m glad you liked!
[]‘s
Bred
Saturday, March 3rd, 2012 12:41
It’s good know that Flash will be unsupported and want learn it few months ago.
Dont’ know that one of HTML5′s feature is the improvement in the video tools.
Thanks for info.
Aiden
Monday, December 5th, 2011 20:25
Another great post Rochester. HTML5 is going to dramatically change the way we design and develop websites. I really do believe that Flash will come to an end very soon.
Rochester Oliveira
Tuesday, December 6th, 2011 13:48
Hi there!
Thanks, specially the “another” part ;)
[]‘s