audio

HTML 5 audio and Video 

Audio:

Html 5 allow to add audio tag directly in the web page.This is very much simple and easy to insert.
Like
<audio controls>
<source src="sample.mp3" type="audio/mpeg" >
<source src="sample.ogg" type"audio/ogg" >
</audio>

here i use keyword controls. This is new attribute in html5 for controls the audio like sound,move forward or backword,play/pause or stop.Now your work is just write this keyword in opening audio tag.
<source>tag is also new in html 5 this is to hold the address of audio file or location of audio file which will be played. Type attribute is used used to tell the browser which type of audio it is.

Browser Compatibility:

But unfortunately different browser support different format.such as chrome and firefox support ogg format and ie 9 support mp3 format.So you have to give both format in source.But do not disappointed there have a better option.You can covert your audio in differnt format by using online tools.

How to convert my audio file for web?

step-1:

Go to http://audio.online-convert.com
step-2:
click audio converter button from left side bar.Then click conver to ogg or just copy and paste(http://audio.online-convert.com/convert-to-ogg) in your browser.

step-3:
upload your audio file

step-4:
click convert file button.

After clicking the button your audio file will start uploading to their server and then  they converted it and again it starts downloading from their server in your desire format.

HTML 5 Video

One of the most exciting thing of html5 is video tag.Now developer can use video as like an image.Previous we need to use plugin like flash or shockwaver which is heavy and slow down visitor browsing experience.

Html 5 video is a great opportunity for us.

Browser compatibility:

Like audio html video is also have some cross browser issue.Chrome firefox and IE9 support 0gv and safari support mp4.But like audio,Video format can convert in  both online and by software.

firefox add-ons:

Step-1:-Go to Fire Fogg
Step-2:-Installed Fire Fogg add-ons and Restart your Firefox browser.
Step-3:-Now firefox already installed in your firefox browser.Go to Menu >>Toos>>make web video.
Step-4:Upload your video file and convert it.

This will give webm file this is supported by chorme firefox and IE9.
But you have to use mp4 format for Opera,safari and iphone and other

Download software to convert video to mp4 format:

Step-1:-Go to Handbrake
Step-2:-Click Downlaod or click here
Step-3:-Installed and run the software.
Step-4:-click source at the top left corner.Then browse destination folder means after convert the video where you want to save file.
Make sure you checked web optimized and container equal to mp4.
There are lots of option for you so try to use it.
Step-5:-Click start.
Thats it.

How to use in web page:

<video width="500px" height="400px" controls  autoplay >
            <source src="video/second.mp4" type="video/mp4" />
            <source src="video/welcome.webm" poster="images/logo_video_tutorials.png" type="video/ogg" />
            
</video>

Here i use two source file because if browsers is unable to read one format then they try to play second format.You may add several source tag if you have several video format for browsers.

HTML 5 syllabus

Other Resource About Audio and video

• Mozilla Using HTML5 audio and video