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

TheBlueRaja · 11-03-2011, 01:49 PM

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>

Stooshie · 11-03-2011, 04:34 PM

Not sure about the IE9 thing, but it crashed my browser (chrome on XP). :-(

Nice looking animation though!