Mercurial > hg > env-test-daniele

comparison audio1.html @ 0:032bc65ebafc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added core components
author George Fazekas <gyorgy.fazekas@eecs.qmul.ac.uk>
date Wed, 06 Mar 2013 15:45:48 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:032bc65ebafc
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>HTML5 MediaElement</title>
8
9 <script src="build/jquery.js"></script>
10 <script src="build/mediaelement-and-player.min.js"></script>
11 <link rel="stylesheet" href="build/mediaelementplayer.min.css" />
12 </head>
13 <body>
14
15 <h1>MediaElementPlayer.js</h1>
16
17 <p>Audio player</p>
18
19 <h2>MP3</h2>
20
21 <audio id="player1" controls="controls">
22 <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test1a.mp3" type="audio/mpeg" />
23 <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test1a.ogg" type="audio/ogg" />
24
25 <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>
26
27 </audio>
28 <div id="default_player_fallback"></div>
29
30 <script>
31 if (document.createElement('audio').canPlayType) {
32 if (!document.createElement('audio').canPlayType('audio/mpeg') &&
33 !document.createElement('audio').canPlayType('audio/ogg')) {
34 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"});
35 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"});
36 document.getElementById('audio_with_controls').style.display = 'none';
37 }
38 else { // HTML5 audio + mp3 support
39 document.getElementById('player').style.display = 'block';
40 }
41 }
42 </script>
43 </audio>
44
45 <audio id="player2" controls="controls">
46 <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.mp3" type="audio/mpeg" />
47 <source src="http://webspace.qmul.ac.uk/twilmering/fxo_audio/test%ib.ogg" type="audio/ogg" />
48
49 <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>
50
51 </audio>
52 <div id="default_player_fallback"></div>
53
54 <script>
55 if (document.createElement('audio').canPlayType) {
56 if (!document.createElement('audio').canPlayType('audio/mpeg') &&
57 !document.createElement('audio').canPlayType('audio/ogg')) {
58 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"});
59 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"});
60 document.getElementById('audio_with_controls').style.display = 'none';
61 }
62 else { // HTML5 audio + mp3 support
63 document.getElementById('player').style.display = 'block';
64 }
65 }
66 </script>
67 </audio>
68
69
70
71
72 <script>
73 $('audio,video').mediaelementplayer();
74 </script>
75
76 </body>
77 </html>
78