Sunday, August 14, 2011

HTML5 Tutorial 7: Adding Video to your page

One of the most exciting buzz these days in web circles is about HTML5 and specifically video on HTML5. HTML5 video tag has solved the age old problem site owners and designers face on how to best embed video on websites.
Prior to the new HTML5 video tag you basically had two options for embedding video on your site to get a video player or to use a 3rd party service like YouTube to host your video and them use their embed code to put the video on your site.
Most people are currently using the 2nd option of using services like YouTube to host their videos and them embedding them on their own site. This option is not really a better design standard than getting a video player and hosting your own videos but it is quicker and free which is why most people end up using this configuration for videos.
For people who do decide to have their own video player they quickly find out that a quality one can be costly and customization may require both a graphic designer and a web designer all just to place a video on their site.
That is where the magic of HTML5 video comes in. It has a simple straight forward tag that is similar to an image tag with a source and attributes. It looks like this:
<video src=”movie.webm” poster=”movie.jpg” controls>I am ALT text</video>


If you have ever added video to a website you know how much simpler that is. However, the problem is that the browsers of the world are not quite ready for what HTML5 has to offer.
Currently only one browser has a robust support for HTML5 video tags and that is chrome, firefox also has limited support and IE hasn’t even touched video in HTML5 in its current browsers yet. So what does that mean for you? It means a good percentage of people using computers to access the internet will not be able to render the video on your page.
Which is why for now when it comes to building websites video in HTML5 is like that golden egg sitting just out of your reach that you really want but you just cannot have. The push for HTML5 compliance is getting louder and louder everyday though so before you know it HTML5 will have enough standards in browsers to make 2.0 web design much easier.

16 comments:

  1. People forget how unintuitive this is for noobs. Nice post!

    ReplyDelete
  2. Yes, anoter nice post, keep up the good work.

    ReplyDelete
  3. that is easy? well how about that. keep em cming dude

    ReplyDelete
  4. Again, nice post, I admit I still use the youtube approach.

    ReplyDelete
  5. Mate I have a friend from Uni who's getting into HTML as a hobby and this will help him heaps...I'll send him here as soon as he wakes up...cheers!

    ReplyDelete
  6. damn i need to get on HTML and learn, probably will later next year

    ReplyDelete
  7. Hmm. It really looks a lot easier than using flash. But... What is this compatible with IE?

    ReplyDelete
  8. @ Iván Gabriel it should be compatible with IE

    ReplyDelete
  9. I have learned so much from your series of articles. Keep them coming, my friend!

    ReplyDelete
  10. another brilliant post, once again really easy to follow, might actually learn somthing about HTML if im not careful :P

    ReplyDelete
  11. I just use the embedding option that's provided. :P

    ReplyDelete
  12. Nice one. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
    html5 player

    ReplyDelete