How to Add-Media to your site by HTML5

Add-Media to your site by HTML5

Developers are now setting the standards on the new code for web pages, which is HTML5 the 5th revision source code for HTML that is used in making templates and pages for browsers. Using HTML5 is somewhat like coding through HMTL, but it focuses on media development. The big problem with html5 is that the standard is not final yet, and different browsers support different subsets of the proposed standard.

For more info about HTML5, click here.

Here’s a code example for adding a video through html5..

Playing Video on the WEB




<video width=”320″ height=”240″ controls=”controls”><source src=”movie.ogg” type=”video/ogg” /><source src=”movie.mp4″ type=”video/mp4″ /><source src=”movie.webm” type=”video/webm” />

Your browser does not support the video tag.





Notice the added feature for HTML, the “video” tag and its attributes; width, height, “controls – play, pause and buffer”, loops and autoplay.  The “source – src ” tag where the files are located, and points to kinds of format or codec support. For now, html5 only supports 3 formats or codecs; ogg, mp4, and webm files extensions. If a browser does not support html5 or the codec, it won’t play and just outputs the specified text you place at the end.

Currently, there are 3 supported video formats for the video element:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec
  • MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec

For more info about codec’s, you can check it out here Video Codecs.


Playing Audio on the WEB

There has never been a standard for playing audio on a web page. HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream. Today, most audio are played through a plugins (like flash). However, not all browsers have the same plugins.

Here’s an Example, has the same syntax as above, only has specified tags for audio.




<audio controls=”controls”><source src=”song.ogg” type=”audio/ogg” /><source src=”song.mp3″ type=”audio/mpeg” />Your browser does not support the audio element.</audio>




Some attributes for audio are the; autoplay, loop, preload tags, src and controls. Pretty much the same, the formats used are:

Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis No Yes Yes Yes No
MP3 Yes No No Yes Yes
Wav No Yes Yes Yes Yes


For more Tutorials about HTML5, click here..


Pros vs Cons


HTML5 is now widely used on modern web pages; it has so many features and tweaks that you can experiment with. You can embed video, audio and flash-players on your page without relying on flash plug-ins and video hosting sites. Also, you can make more Dynamic web pages and upgrades to your site that has a friendlier yet complex look for coders. Good on mobile devices. This could be filed under hardware acceleration, since that’s exactly why HTML5 video is excellent for mobile devices, but the future of the web is in the mobile realm, and HTML5 does a great job at moving in that direction.

It’s free and open. You can build HMTL5 apps without having to install flash and plug-ins and no hosting.



It has a limited view to some users using old browsers and some pages take time to load because of connecting through.  Poor support right now. Currently, only Chrome and Safari support H.264 video with HTML5. The combined market share of those browsers is about 6%. Not good. Firefox will likely eventually support the dominant video codec. Internet Explorer will support H.264 in the next version- 9.0. Sadly though, about 35% of people browsing the web are using Internet Explorer 7 or below. These people are unlikely to upgrade to version 9 when it comes out, seeing as they haven’t upgraded to version 8 yet. So, with those stats, less than 10% of people browsing the web on full computers now can see HTML5 video, and within a year or two, that percentage will jump to about 65%. Not impressive.

Want more info? Flash Vs HMTL5, click here..


Leave a Reply

Your email address will not be published. Required fields are marked *