Supercharge your Site with Video, The Fundamentals

  • Published on Monday, 05 November 2012 02:54
  • Hits: 2941
User Rating:  / 5
PoorBest 

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

  • .mp4 = H.264 + AAC
  • .ogg/.ogv = Theora + Vorbis
  • .webm = VP8 + Vorbis

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"/>
</video>

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>
</object>
</video>

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:

  • How do i manage to change the controls on the video player and customize it??, ..how do i control the Video Events??. This will be covered in the next chapter....
  • Can i use any Video frameworks based on HTML5 video tag??. For sure and i recommend the following:
    • JVideo: Check all the info HERE
    • PopcornJS: Check all the info HERE
    • Kaltura: I already mentioned it 2 years ago and now it is even better!!. Chec all the info HERE

 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:

Music You like..

IT News to be aware of ..

New in FreakZion...

Most Visited...

Famous, the most beautiful javascript Li…

Hits:4845

Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more

QR Codes: The best 9 QR Code Generators

Hits:42817

QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more

AngularJS, No more Dom Manipulation

Hits:7559

AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more