Using HTML5 Video The Easy Way

Posted in Tips, Tools, Web Design3 years ago • Written by 9 Comments

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!

How <video> tag works

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:

<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!

Grab our HTML5 eBook now!

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!

43 Written ArticlesWebsiteGoogle+

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/

9 Comments Best Comments First
  • Ken

    Friday, December 2nd, 2011 16:42

    1

    With Flash you only need one video format, with HTML 5 you need at least 3? I guess that we are going backwards…

    0
    • Rochester Oliveira

      Saturday, December 3rd, 2011 04:58

      3

      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

      0
  • David Jones

    Friday, December 2nd, 2011 22:06

    2

    nice post, mediaelementjs works pretty well for me though

    0
    • Rochester Oliveira

      Saturday, December 3rd, 2011 05:00

      4

      Thanks David!

      Hope you enjoyed other tools shown here :)

      []‘s

      0
  • Phillip

    Saturday, December 3rd, 2011 04:05

    5

    Good Info.

    Will try these tutorials

    Thanks

    0
    • Rochester Oliveira

      Monday, December 5th, 2011 14:53

      6

      Thanks Phillip, I’m glad you liked!

      []‘s

      0
  • Bred

    Saturday, March 3rd, 2012 12:41

    9

    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.

    0
  • Aiden

    Monday, December 5th, 2011 20:25

    7

    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.

    0
    • Rochester Oliveira

      Tuesday, December 6th, 2011 13:48

      8

      Hi there!

      Thanks, specially the “another” part ;)

      []‘s

      0
  • Bred

    Saturday, March 3rd, 2012 12:41

    9

    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.

    0
  • Aiden

    Monday, December 5th, 2011 20:25

    7

    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.

    0
    • Rochester Oliveira

      Tuesday, December 6th, 2011 13:48

      8

      Hi there!

      Thanks, specially the “another” part ;)

      []‘s

      0
  • Phillip

    Saturday, December 3rd, 2011 04:05

    5

    Good Info.

    Will try these tutorials

    Thanks

    0
    • Rochester Oliveira

      Monday, December 5th, 2011 14:53

      6

      Thanks Phillip, I’m glad you liked!

      []‘s

      0
  • David Jones

    Friday, December 2nd, 2011 22:06

    2

    nice post, mediaelementjs works pretty well for me though

    0
    • Rochester Oliveira

      Saturday, December 3rd, 2011 05:00

      4

      Thanks David!

      Hope you enjoyed other tools shown here :)

      []‘s

      0
  • Ken

    Friday, December 2nd, 2011 16:42

    1

    With Flash you only need one video format, with HTML 5 you need at least 3? I guess that we are going backwards…

    0
    • Rochester Oliveira

      Saturday, December 3rd, 2011 04:58

      3

      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

      0

Comments are closed.

54.196.199.46 - unknown - unknown - US