SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    This is a very generic question, so next time please try using Google first.
    https://developer.mozilla.org/en-US/...udio_and_video

  3. #3
    Non-Member
    Join Date
    Jul 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For video use:

    Code:
    <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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Non-Member
    Join Date
    Jul 2013
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by Pullo; Jul 30, 2013 at 04:00. Reason: Removed unnecessary link

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Fpolis - SC
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rinaldo123 View Post
    you have to save your video to at least 3 or 4 different formats.
    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).

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by de kat
    Nothing in the general how-to's mention this
    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-ht...ts-aac-and-ogg

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  13. #13
    Non-Member
    Join Date
    Aug 2013
    Location
    London
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The below code is use to insert the sudio tag in HTML pages of your website
    Code:
    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/wikipedi...c8/Example.ogg


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •