Mercurial > hg > env-test-daniele

view audio1.html @ 25:4a4bd554b4c1 tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Closing this sub branch.
author Daniele Barchiesi <daniele.barchiesi@eecs.qmul.ac.uk>
date Mon, 25 Mar 2013 14:02:54 +0000
parents 032bc65ebafc
children
line wrap: on
line source
<!DOCTYPE html>
<html>
<head>

	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>HTML5 MediaElement</title>	
	
	<script src="build/jquery.js"></script>	
	<script src="build/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="build/mediaelementplayer.min.css" />
</head>
<body>

<h1>MediaElementPlayer.js</h1>

<p>Audio player</p>

<h2>MP3</h2>

<audio id="player1" controls="controls">
    <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test1a.mp3" type="audio/mpeg" />
    <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test1a.ogg" type="audio/ogg" />	

	  <object class="playerpreview" type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="200" height="20"><param name="movie" value="player_mp3_mini.swf" /><param name="bgcolor" value="#085c68" /><param name="FlashVars" value="mp3=http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ia.mp3" /><embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ia.mp3" /></object>

  </audio>
  <div id="default_player_fallback"></div>

  <script>
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg') &&
        !document.createElement('audio').canPlayType('audio/ogg')) {
      swfobject.embedSWF("player_mp3_mini.swf", "default_player_fallback", "200", "20", "9.0.0", "", {"mp3":"http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ia.mp3"}, {"bgcolor":"#085c68"});
      swfobject.embedSWF("player_mp3_mini.swf", "custom_player_fallback", "200", "20", "9.0.0", "", {"mp3":"http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ia.mp3"}, {"bgcolor":"#085c68"});
      document.getElementById('audio_with_controls').style.display = 'none';
    }
    else { // HTML5 audio + mp3 support
      document.getElementById('player').style.display = 'block';
    }
  }
  </script>
</audio>	

<audio id="player2" controls="controls">
    <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.mp3" type="audio/mpeg" />
    <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.ogg" type="audio/ogg" />	

	  <object class="playerpreview" type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="200" height="20"><param name="movie" value="player_mp3_mini.swf" /><param name="bgcolor" value="#085c68" /><param name="FlashVars" value="mp3=http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.mp3" /><embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.mp3" /></object>

  </audio>
  <div id="default_player_fallback"></div>

  <script>
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg') &&
        !document.createElement('audio').canPlayType('audio/ogg')) {
      swfobject.embedSWF("player_mp3_mini.swf", "default_player_fallback", "200", "20", "9.0.0", "", {"mp3":"http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.mp3"}, {"bgcolor":"#085c68"});
      swfobject.embedSWF("player_mp3_mini.swf", "custom_player_fallback", "200", "20", "9.0.0", "", {"mp3":"http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.mp3"}, {"bgcolor":"#085c68"});
      document.getElementById('audio_with_controls').style.display = 'none';
    }
    else { // HTML5 audio + mp3 support
      document.getElementById('player').style.display = 'block';
    }
  }
  </script>
</audio>




<script>
$('audio,video').mediaelementplayer();
</script>

</body>
</html>