Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML5 Audio Tag and IE9 - Audio only plays for a second

    Hi,
    I have a website i am setting up for a friend using HTML5 with Flash fallback, im trying to get it to play an audio file and a video file. It works fine in most browsers but IE9 is being a ****.

    The audio plays for a second and stops and i cant work out why. The code is included below and you can see the page for yourself over here : http://bit.ly/t1fCIM

    Video works fine.

    Has anyone any ideas here?

    Code:
    <!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
    </head>
                                <div id="footer">
                                <div align="center">
                                <!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
        <video controls poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
             <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
             <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
             <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
             <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
              <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
              <param name="allowFullScreen" value="true" />
              <param name="wmode" value="transparent" />
              <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
              <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
             </object>
        </video>
                                </div>
        <p>
        <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
        </p>
                                </div>
                                <div id="footer">
                                <div align="center">
    <!-- Try HTML 5 playback first. -->
    <audio controls="controls">
    <source src="music/intro.ogg" type="audio/ogg" /> <!-- Firefox and Chrome -->
    <source src="music/intro.mp3" type="audio/mpeg" /> <!-- Safari and iPhone -->
    <!-- Windows Media Player class id to enable native streaming on IE 7 and above. IE 6 and below will go straight to flash player -->
    <!--[if gt IE 6]>
    <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="320" height="45"><!
    [endif]-->
    <!--[if !IE]><!-->
    <object type="audio/mpeg" data="music/intro.mp3">
    <!--<![endif]-->
    <!-- Windows Media Player controls -->
    <param name="url" value="music/intro.mp3" />
    <param name="autostart" value="false" />
    <param name="uiMode" value="full" />
    <!-- Flash fallback -->
    <object height="24" width="320" type="application/x-shockwave-flash" data="js/player.swf" id="audioplayer">
    <param name="movie" value="js/player.swf" />
    <param name="FlashVars" value="playerID=audioplayer&amp;soundFile=music/intro.mp3" />
    <!-- Fallback image when nothing works -->
    <img class src="__POSTER__.JPG" width="128" height="135" alt="Title" title="No audio playback capabilities, please download the audio below" />
    </object><!--[if gt IE 6]><!-->
    </object><!--<![endif]-->
    </audio>
    <!-- Download links outside the audio tag -->
    <p>Download Audio: <a href="music/intro.mp3">Audio Format "MP3"</a> | <a href="music/intro.ogg">Audio Format "OGG"</a></p>
    </div>
        <div class="clr"></div>  </div>
    </body>
    </html>

  • #2
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    Not sure about the IE9 thing, but it crashed my browser (chrome on XP). :-(

    Nice looking animation though!
    Regards, Stooshie
    O


  •  

    Tags for this Thread

    Posting Permissions

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