4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
<title>HTML5 MediaElement</title>
8
<script src="../build/jquery.js"></script>
10
<script src="../src/js/me-namespace.js" type="text/javascript"></script>
11
<script src="../src/js/me-utility.js" type="text/javascript"></script>
12
<script src="../src/js/me-i18n.js" type="text/javascript"></script>
13
<script src="../src/js/me-plugindetector.js" type="text/javascript"></script>
14
<script src="../src/js/me-featuredetection.js" type="text/javascript"></script>
15
<script src="../src/js/me-mediaelements.js" type="text/javascript"></script>
16
<script src="../src/js/me-shim.js" type="text/javascript"></script>
18
<script src="../src/js/mep-library.js" type="text/javascript"></script>
19
<script src="../src/js/mep-player.js" type="text/javascript"></script>
20
<script src="../src/js/mep-feature-playpause.js" type="text/javascript"></script>
21
<script src="../src/js/mep-feature-progress.js" type="text/javascript"></script>
22
<script src="../src/js/mep-feature-time.js" type="text/javascript"></script>
23
<script src="../src/js/mep-feature-tracks.js" type="text/javascript"></script>
24
<script src="../src/js/mep-feature-volume.js" type="text/javascript"></script>
25
<script src="../src/js/mep-feature-stop.js" type="text/javascript"></script>
26
<script src="../src/js/mep-feature-fullscreen.js" type="text/javascript"></script>
27
<link rel="stylesheet" href="../src/css/mediaelementplayer.css" />
40
<h1>MediaElementPlayer.js</h1>
42
<p>Recommended Setup</p>
47
<h2>MP3 audio (as src)</h2>
49
<audio id="player2" src="../media/AirReview-Landmarks-02-ChasingCorporate.mp3" preload="none" type="audio/mp3" controls="controls">
50
<p>Your browser leaves much to be desired.</p>
53
<span id="audio-mode"></span>
58
<video width="640" height="360" id="player1" controls="controls" preload="none" poster="../media/echo-hereweare.jpg">
60
<source src="../media/echo-hereweare.mp4" type="video/mp4" />
62
<track kind="subtitles" src="../media/mediaelement.srt" srclang="en" ></track>
66
<span id="video-mode"></span>
67
<div style="min-height: 400px">
68
<div id="video-events"></div>
69
<div id="video-props"></div>
72
<video width="640" height="360" id="player2" controls="controls" preload="none" poster="../media/big_buck_bunny.jpg">
74
<source src="../media/big_buck_bunny.mp4" type="video/mp4" />
77
<source src="../media/big_buck_bunny.webm" type="video/webm" />
87
function appendMediaEvents($node, media) {
89
mediaEventNames = 'loadstart progress suspend abort error emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange'.split(' ');
90
mediaEventTable = $('<table class="media-events"><caption>Media Events</caption><tbody></tbody></table>').appendTo($node).find('tbody'),
98
for (il = mediaEventNames.length;i<il;i++) {
99
eventName = mediaEventNames[i];
100
th = $('<th>' + eventName + '</th>');
101
td = $('<td id="e_' + media.id + '_' + eventName + '" class="not-fired">0</td>');
109
if ((i+1) % 5 == 0) {
110
mediaEventTable.append(tr);
115
media.addEventListener(eventName, function(e) {
117
var notice = $('#e_' + media.id + '_' + e.type),
118
number = parseInt(notice.html(), 10);
122
.attr('class','fired');
126
mediaEventTable.append(tr);
129
function appendMediaProperties($node, media) {
130
var /* src currentSrc */
131
mediaPropertyNames = 'error currentSrc networkState preload buffered bufferedBytes bufferedTime readyState seeking currentTime initialTime duration startOffsetTime paused defaultPlaybackRate playbackRate played seekable ended autoplay loop controls volume muted'.split(' '),
132
mediaPropertyTable = $('<table class="media-properties"><caption>Media Properties</caption><tbody></tbody></table>').appendTo($node).find('tbody'),
140
for (il = mediaPropertyNames.length; i<il; i++) {
141
propName = mediaPropertyNames[i];
142
th = $('<th>' + propName + '</th>');
143
td = $('<td id="p_' + media.id + '_' + propName + '" class=""></td>');
151
if ((i+1) % 3 == 0) {
152
mediaPropertyTable.append(tr);
157
setInterval(function() {
163
for (i = 0, il = mediaPropertyNames.length; i<il; i++) {
164
propName = mediaPropertyNames[i];
165
td = $('#p_' + media.id + '_' + propName);
166
val = media[propName];
168
(typeof val == 'undefined') ?
169
'undefined' : (val == null) ? 'null' : val.toString();
179
<script type="text/javascript">
180
$('audio, video').bind('error', function(e) {
182
//console.log('error',this, e, this.src, this.error.code);
185
jQuery(document).ready(function() {
186
$('audio, video').mediaelementplayer({
189
pluginPath:'../build/',
190
enablePluginSmoothing:true,
193
enablePluginDebug: true,
194
//iPadUseNativeControls: true,
196
//forcePluginFullScreen: true,
197
usePluginFullScreen: true,
199
//plugins: ['silverlight'],
200
//features: ['playpause','volume','stop'],
201
success: function(me,node) {
203
var tagName = node.tagName.toLowerCase();
204
$('#' + tagName + '-mode').html( me.pluginType + ': success' + ', touch: ' + mejs.MediaFeatures.hasTouch);
207
if (tagName == 'audio') {
209
me.addEventListener('progress',function(e) {
215
me.addEventListener('progress',function(e) {
221
if (tagName == 'video' && node.id == 'player1') {
222
appendMediaProperties($('#' + tagName + '-props'), me);
223
appendMediaEvents($('#' + tagName + '-events'), me);
b'\\ No newline at end of file'