loading...

Friday, November 12, 2010

How to add Mp3,Mp4,Ogg,Wav files to blogger using HTML5

How many of us know that the new blogger templates are HTML5 templates,In order to find whether yourtemplate is html5 look for the doctype, if the doctype is <!DOCTYPE html> then your blogger template is HTML5 else your doctype should look like this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.So we have to take advantage of using the features of HTML5 new tag elements.Most of the blogger/blogspot users find difficult to add Mp3,Mp4,Ogg,Wav file format to their post.Their are lot of other ways to add the above mentioned formats using gadgets from google or using some other web apps.Why not we use the HTML5 audio and video tag elements to our post to entertain our visitors easily using these tag elements. HTML5 have more features  but in this post i am going look onto the audio and video tag elements.
How to add Mp3,Mp4,Ogg,Wav  files to blogger using HTML5


Support for browsers
Audio
As of Firefox 3.5, Chrome 3, Opera 10.5, and Safari 4, we can take advantage of many of the new HTML 5 features, including native audio support without the need for Flash.

Currently, there are 3 supported formats for the audio element(source):

FormatIE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg VorbisNoYesYesYesNo
MP3NoNoNoYesYes
WavNoYesYesNoYes

Video

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

FormatIE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
OggNoYesYesYesNo
MPEG 4NoNoNoYesYes

How to add Mp3,Mp4,Ogg,Wav  files to blogger using HTML5

How to add Audio and video tag elements to blogger
Audio
In the Edit html mode while you are posting add the below code and the replace src url with above mentioned formats to your src url
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>



Video
For more details on controls Look here
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

2 comments:

  1. This infor is great thanks Rajesh for the post.

    ReplyDelete
  2. Thanks share this good think post at this site.html5 video player

    ReplyDelete

fuzionpro Headline

fuzionpro