Supercharge your Site with Video, The Fundamentals

User Rating:  / 5
View Comments

One video does worth more than one thousand words, as I mentioned in one old post, so does the Pictures.

So why most of the sites have many images and almost no videos??.

Mainly because of 3 factors:

  1. Those sites have no video data to put in place.
  2. The bandwidth in some homes was just not enough for that media format so many sites avoided this situation.
  3. The video plugin were not able to adapt to the size of the different devices and screens resolutions

..But nowadays only statement 1 could just be the problem, ...which it shouldn't due the amount of videos on the web as well the ones that you can record even with your smartphone. So let's go and use the HTML5 video Element!!!.

The video tag natively integrates a video in your page. as easy as this:

<video src="videofile1.mp4"controls width="360"height="240" poster="poster.jpg"></video>

Wooow, that was easy, wasn't it??. Well, we all know that anything that is too easy turns to be quite boring so let's work a bit more on this. First of all, there are different video media formats, we all know that, and not all the browsers support all of them. So 3 video formats have become the major players in this league:

CodecTypeIE >=9FirefoxChromeSafariOpera
Ogg Theora Free no yes yes no yes
H.264 Licensed yes no no yes no
Webm (VP8) Free no yes yes no yes

To be more specific of the different Video Formats

That means that if you would like to place a video inyour site available for every browser, then you should have it available in this  3 formats, ..and no problem writing the code for this as the VIDEO Tag allows multi formats:

<video controls width="360" height="240" poster="poster.jpg">
<source src="videofile1.ogv" type="video/ogg"/>
<source src="videofile1.mp4" type="video/mp4"/>

Next, ...what happens with Browsers old versions??. As usual you have the solution to just forget about them as they are obsolete and time by time they will be even more tending to disappear, ..or if you are a generous person then add the flash version of the video:

<video controls width="360" height="240" poster="poster.jpg">
<source src="videofile1.ogv" type="video/ogg"/>
<source src="videofile1.mp4" type="video/mp4"/>
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=videofile1.mp4">
<param name="movie" value="player.swf?file=videofile1.mp4"/>
<a href="videofile1.mp4">Get the Movie</a>

OK, now we have a video visible in any browser!!!, although I strongly recommend reading this explanation of how to get Video for everybody.

What is next??,  a couple of things, ..one I will cover in this Chapter while the other one will be in the next one:

 Ok, ok, i am not getting into nothing really fancy in this blog, ...that is why i called it "The fundamentals", but in the next chapter, in less than a couple of weeks from now, you will have "The Controls and Customization"...


Take a peek to the rest of this tutorial: