Mercurial > hg > env-test-daniele
comparison johndyer-mediaelement-13fa20a/demo/mediaelementplayer.html @ 0:032bc65ebafc
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| 5 <title>HTML5 MediaElement</title> | |
| 6 | |
| 7 <script src="../build/jquery.js"></script> | |
| 8 <script src="../build/mediaelement-and-player.min.js"></script> | |
| 9 <link rel="stylesheet" href="../build/mediaelementplayer.min.css" /> | |
| 10 </head> | |
| 11 <body> | |
| 12 | |
| 13 <h1>MediaElementPlayer.js</h1> | |
| 14 | |
| 15 <h2>1. Single MP4 File</h2> | |
| 16 | |
| 17 <code><pre> | |
| 18 <video width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4" | |
| 19 id="player1" poster="../media/echo-hereweare.jpg" | |
| 20 controls="controls" preload="none"></video> | |
| 21 </pre></code> | |
| 22 | |
| 23 <!-- simple single file method --> | |
| 24 <video width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4" | |
| 25 id="player1" poster="../media/echo-hereweare.jpg" | |
| 26 controls="controls" preload="none"></video> | |
| 27 | |
| 28 <span id="player1-mode"></span> | |
| 29 | |
| 30 <p><b>Note</b>: if you are working with local files, you'll need to add your working directory | |
| 31 to the <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">Flash Global Security Settings</a>.</p> | |
| 32 | |
| 33 <h2>2. Multi-Codec with no JavaScript fallback player</h2> | |
| 34 | |
| 35 <code><pre> | |
| 36 <video width="640" height="360" id="player2" poster="../media/echo-hereweare.jpg" controls="controls" preload="none"> | |
| 37 <!-- MP4 source must come first for iOS --> | |
| 38 <source type="video/mp4" src="../media/echo-hereweare.mp4" /> | |
| 39 <!-- WebM for Firefox 4 and Opera --> | |
| 40 <source type="video/webm" src="../media/echo-hereweare.webm" /> | |
| 41 <!-- OGG for Firefox 3 --> | |
| 42 <source type="video/ogg" src="../media/echo-hereweare.ogv" /> | |
| 43 <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off --> | |
| 44 <object width="640" height="360" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf"> | |
| 45 <param name="movie" value="../build/flashmediaelement.swf" /> | |
| 46 <param name="flashvars" value="controls=true&poster=../media/echo-hereweare.jpg&file=../media/echo-hereweare.mp4" /> | |
| 47 <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed --> | |
| 48 <img src="../media/echo-hereweare.jpg" width="640" height="360" alt="Here we are" | |
| 49 title="No video playback capabilities" /> | |
| 50 </object> | |
| 51 </video> | |
| 52 </pre></code> | |
| 53 | |
| 54 <video width="640" height="360" id="player2" poster="../media/echo-hereweare.jpg" controls="controls" preload="none"> | |
| 55 <!-- MP4 source must come first for iOS --> | |
| 56 <source type="video/mp4" src="../media/echo-hereweare.mp4" /> | |
| 57 <!-- WebM for Firefox 4 and Opera --> | |
| 58 <source type="video/webm" src="../media/echo-hereweare.webm" /> | |
| 59 <!-- OGG for Firefox 3 --> | |
| 60 <source type="video/ogg" src="../media/echo-hereweare.ogv" /> | |
| 61 <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off --> | |
| 62 <object width="640" height="360" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf"> | |
| 63 <param name="movie" value="../build/flashmediaelement.swf" /> | |
| 64 <param name="flashvars" value="controls=true&file=../media/echo-hereweare.mp4" /> | |
| 65 <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed --> | |
| 66 <img src="../media/echo-hereweare.jpg" width="640" height="360" alt="Here we are" | |
| 67 title="No video playback capabilities" /> | |
| 68 </object> | |
| 69 </video> | |
| 70 | |
| 71 <span id="player2-mode"></span> | |
| 72 | |
| 73 <script> | |
| 74 | |
| 75 $('audio,video').mediaelementplayer({ | |
| 76 success: function(player, node) { | |
| 77 $('#' + node.id + '-mode').html('mode: ' + player.pluginType); | |
| 78 } | |
| 79 }); | |
| 80 | |
| 81 </script> | |
| 82 | |
| 83 <input type="button" id="stopall" value="Stop all"> | |
| 84 | |
| 85 <script> | |
| 86 $('#stopall').click(function() { | |
| 87 $('video, audio').each(function() { | |
| 88 $(this)[0].player.pause(); | |
| 89 }); | |
| 90 }); | |
| 91 </script> | |
| 92 | |
| 93 | |
| 94 </body> | |
| 95 </html> |