HTML5 Epic Fail With Video


If you’re familiar with how video works in HTML5, you can be really surprised by the heading of the post, but rest assured I’ll be able to explain what I mean if you read the article. You’ll see how video embedding could be made way easier than it is now. Don’t get me wrong. I’m a big fan of HTML5, but I was able to find a whole lot of drawbacks – not that they are hidden or something – that need to be rectified somehow.

Before

It goes without saying that it was worse before HTML5 came into being. You actually had to embed video with the help of Flash like so:

allowscriptaccess=”always” allowfullscreen=”true” >

width=”600″ height=”400″>

That’s no fun at all. Not that we were supposed to do it all manually, but it still looked really messy. In a nutshell, you had to use Flash for that. It was getting more and more obvious that it can’t be like that any longer because iOS devices stopped supporting Flash, which is not without a reason. And the late Steve Jobs is not the only one who was or actually is sure that Flash is not the future. At least, not for online video.

After

Now, if your browser supports HTML5 to that extent (the major browsers do), you can embed video by putting the following chunk of code:

Not too much, huh? The difference is huge! It looks that it should have been like that from the very gitgo, right?

It’s not All Roses

As you might have guessed from the heading of the post, there must be a catch somewhere. And there are even some of them, actually. For starters, not all browsers support .mp4. So, the code I gave above won’t work if you open it with Firefox, because it supports .webm (instead of .mp4). To ensure that your video is accessible for Firefox users as well, you need to complicate your video embedding code and make it look as follows:

Not that hard, but still it starts looking like a pain in the browser, so to put it.

What’s more, some browsers don’t support the brand new HTML5 tag. You need to provide a solution for those sorts of browsers as well. You can actually allow them to just download your video:

video>
Download the video.

Now it’s not t hat neat and nice as it was in the very beginning, but it’s still not that messy as it was with Flash.
Additional but Still Crucial Features

You can specify the following attributes for your video:

  • controls (adding the standards controls such as play/stop, full screen)
  • autoplay (the name says it all)
  • poster (the first image of the video as the initial display of the video)
  • loop (it allows automatic looping of your video)
  • preload (it makes the video ready for watching right on your site)

Video Encoding Tools

Since you need to provide a few formats to make everybody happy in terms of watching your site videos, you need to convert your videos. Here are a few ways to do just that:

HandBrake
Miro Video Converter
Easy HTML5 Video

Flash Fallback

The really discouraging thing about implementing all this HTML5 video jazz is that you still need to provide a Flash fallback to make sure that your video is available for every user out there.

allowscriptaccess=”always” allowfullscreen=”true” ?

width=”600″ height=”400″>

So, it really looks that we just messed around with all those fancy HTML5 video tags and got back to Flash? Are we wasting time? If you need to create a Flash fallback, why not just use Flash as you did before?

Video For Everybody

To make things a bit more simple and easier to implement, the smart guys out there created a nice generator that allows you to just specify the paths to all your videos in the formats you want to make available and then just copy/paste the resulted code into your html file. It’s looks that it’s the neatest solutions as of now Just convert your videos to the formats you want to make available, upload them to your server and use the Video for Everybody generator to create your embed code.

In Conclusion

Though video does not work as I would expect from HTML5, it’s kind of OK. Sure thing, it’s still obvious that there’s a pretty long way to go until embedding a video becomes a breeze. At the time of this writing, you still need to make a handful of moves to make sure that your video is visible to every single user on the web. Hopefully the situation will change for better before we know it. What is your opinion, guys?

Ken is as geek as possible. He’s also really into Apple devices. One of his credos is that SEO combined with WordPress can work real wonders.

Let me send you free updates!

»


What do you think? Share your thoughts below!

If you want a pic to show with your comment, go get a gravatar!
 

Author / Blog Name
E-mail (optional)
URI
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.


CommentLuv badge


<<         >>