SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  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
    5,938
    Mentioned
    214 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,810
    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,176
    Mentioned
    454 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,278
    Mentioned
    50 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,176
    Mentioned
    454 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
    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
  •