How to use Html audio video tag

I am new in HTML5 use, I don’t know how to use audio/video tag . can any one tell me how to use audio/video tag.

Hi there,

Welcome to the forums :slight_smile:

This is a very generic question, so next time please try using Google first.

Yeah i help you First one is for video : <video width=“300” height=“290” controls><source src=“movie.mp4” type=“video/mp4”> </video> and nest one for audio :
<audio controls>
<source src=“song.mp3” type=“audio/mpeg”>
</audio>

For video use:

<video  width="300" height="200" poster="movie.jpg" controls>
        <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
        <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
        <object data="flashmovie.swf" width="300" height="200" type="application/x-shockwave-flash">
              <param name="src" value="flashmovie.swf">
              <param name="quality" value="high">
              <param name="bgcolor" value="#FFFFFF">
              <param name="wmode" value="transparent">
              <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
              <p>Fallback content for browsers that don't support either video or flash goes here.</p>
        </object> 
</video>

That way you allow for the different video formats that different browsers support and have a flash fallback for browsers that don’t recognise the video tag and another fallback for browsers that don’t support any type of video including flash.

there is the audio code of html5
<audio controls>
<source src=“horse.ogg” type=“audio/ogg”>
<source src=“horse.mp3” type=“audio/mpeg”>
Your browser does not support the audio element.
</audio>

<snip>

HTML5 is a good concept but there is a problem: you have to save your video to at least 3 or 4 different formats. I would advise you to use flash (if you can) cause it’s much easier to integrate it with websites.

You can pretty much get away with just using H264 encoded mp4s these days, perhaps with a WebM version thrown in for good measure. (That’s as long as you don’t care about IE8 and under, which have a low user base nowadays).

i threw an mp3 onto a page on my server, coded up a simple (one source one container) audio tag. Controls appear, but nothing is interactive, and nothing plays (well, Opera, my oldest browser, who doens’t support mp3 yet… opens Rythmbox and plays the file from there, which is cute). Nothing in the general how-to’s mention this, despite the browsers I’m testing in being new, supporting the elements, and supposedly supporting the mp3-- audio/mpeg formats and MIMEs.

Which how-tos do you mean?

According to HTML5Please, the best option is to supply two audio formats—Ogg and AAC. They link to this page: https://www.scirra.com/blog/44/on-html5-audio-formats-aac-and-ogg

According to the how-to’s (the good ones anyway) we should do it as felgall mentioned above.

AAC is just supposedly a better version of mp3, but I didn’t make this file and I don’t own any converters. I’m solely testing the HTML part here.

All I’m looking at is making this work on chromium (could this be different from chrome?) who should work with the code here http://stommepoes.nl/downloadtest.html (the picture is a different thing I wrote for someone on SO, so I’m only referring to the audio controls underneath).

There must be something wrong with that, yet it matches the most basic setups listed by places like HTML5doctor (so, without all the fallbacks I shouldn’t need anyway for the browsers I’m testing in).

Honestly the mp3 came from work and I’m thinking of telling them to just use Flash anyway, since old IE is indeed an issue for us. But I was hoping to see fancy HTML5 audio working out of the box first.

Does anyone use Chromium? I don’t know much about it, but I never see it listed in browser stats. The audio works fine in Chrome for me, with controls and all.

I have no idea who uses Chromium. It used to be Chrome without the Google Spyware but there’s still a lot of built-in Googley stuff in there.

I also have SWIron on the Windowses in my VMs.

The below code is use to insert the sudio tag in HTML pages of your website

You use the <audio> tag just like you use any other element:
<audio autoplay="autoplay" controls="controls">  
   <source src="music.ogg" />  
   <source src="music.mp3" />  
</audio> 

Output : http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg