Mercurial > hg > env-test-daniele

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