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.
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.
Video
Currently, there are 2 supported video formats for the video element:
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
Video
For more details on controls Look here
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.
| Format | IE 8 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | No | Yes | Yes | Yes | No |
| MP3 | No | No | No | Yes | Yes |
| Wav | No | Yes | Yes | No | Yes |
Video
Currently, there are 2 supported video formats for the video element:
| Format | IE 8 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
|---|---|---|---|---|---|
| Ogg | No | Yes | Yes | Yes | No |
| MPEG 4 | No | No | No | Yes | Yes |
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>
This infor is great thanks Rajesh for the post.
ReplyDeleteThanks share this good think post at this site.html5 video player
ReplyDelete