~ubuntu-branches/debian/sid/wordpress/sid

« back to all changes in this revision

Viewing changes to debian/missing-sources/mediaelement/test/test.html

  • Committer: Package Import Robot
  • Author(s): Craig Small
  • Date: 2014-04-16 22:48:26 UTC
  • mfrom: (1.2.34)
  • Revision ID: package-import@ubuntu.com-20140416224826-087tu71aw8bjhvmd
Tags: 3.8.3+dfsg-1
New upstream release - fixes Quick Draft tool that broke in 3.8.2

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!DOCTYPE html>
 
2
<html>
 
3
<head>
 
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>       
 
7
        
 
8
        <script src="../build/jquery.js"></script>
 
9
        
 
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>
 
17
        
 
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" />
 
28
                
 
29
        <style>
 
30
        #container{
 
31
                width: 700px;
 
32
                margin: 20px auto;
 
33
        }
 
34
        </style>
 
35
</head>
 
36
<body>
 
37
 
 
38
<div id="container">
 
39
 
 
40
<h1>MediaElementPlayer.js</h1>
 
41
 
 
42
<p>Recommended Setup</p>
 
43
 
 
44
<form>
 
45
 
 
46
 
 
47
<h2>MP3 audio (as src)</h2>
 
48
 
 
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>                  
 
51
</audio>
 
52
 
 
53
<span id="audio-mode"></span>
 
54
 
 
55
<h2>MP4/WebM</h2>
 
56
 
 
57
 
 
58
<video width="640" height="360" id="player1" controls="controls"  preload="none" poster="../media/echo-hereweare.jpg">
 
59
 
 
60
        <source src="../media/echo-hereweare.mp4"  type="video/mp4" />  
 
61
                
 
62
        <track kind="subtitles" src="../media/mediaelement.srt" srclang="en"  ></track>
 
63
        
 
64
</video>
 
65
 
 
66
<span id="video-mode"></span>
 
67
<div style="min-height: 400px">
 
68
<div id="video-events"></div>
 
69
<div id="video-props"></div>
 
70
</div>
 
71
 
 
72
<video width="640" height="360" id="player2" controls="controls"  preload="none" poster="../media/big_buck_bunny.jpg">
 
73
        <!--
 
74
        <source src="../media/big_buck_bunny.mp4"   type="video/mp4" />
 
75
        -->
 
76
        
 
77
        <source src="../media/big_buck_bunny.webm"   type="video/webm" />
 
78
</video>
 
79
 
 
80
 
 
81
</form>
 
82
 
 
83
</div>
 
84
 
 
85
 
 
86
<script>
 
87
function appendMediaEvents($node, media) {
 
88
        var 
 
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'),
 
91
                tr = null,
 
92
                th = null,
 
93
                td = null,
 
94
                eventName = null,
 
95
                il = 0,                         
 
96
                i=0;
 
97
                
 
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>');
 
102
                                        
 
103
                if (tr == null) 
 
104
                        tr = $("<tr/>");
 
105
                        
 
106
                tr.append(th);
 
107
                tr.append(td);
 
108
 
 
109
                if ((i+1) % 5 == 0) {
 
110
                        mediaEventTable.append(tr);
 
111
                        tr = null;
 
112
                }               
 
113
                
 
114
                // listen for event
 
115
                media.addEventListener(eventName, function(e) {
 
116
                        
 
117
                        var notice = $('#e_' + media.id + '_' + e.type),
 
118
                                number = parseInt(notice.html(), 10);
 
119
                        
 
120
                        notice
 
121
                                .html(number+1)
 
122
                                .attr('class','fired');
 
123
                }, true);
 
124
        }       
 
125
        
 
126
        mediaEventTable.append(tr);
 
127
}
 
128
 
 
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'),
 
133
                tr = null,
 
134
                th = null,
 
135
                td = null,
 
136
                propName = null,        
 
137
                il = 0,         
 
138
                i=0;
 
139
                
 
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>');
 
144
                                        
 
145
                if (tr == null) 
 
146
                        tr = $("<tr/>");
 
147
                        
 
148
                tr.append(th);
 
149
                tr.append(td);
 
150
 
 
151
                if ((i+1) % 3 == 0) {
 
152
                        mediaPropertyTable.append(tr);
 
153
                        tr = null;
 
154
                }
 
155
        }       
 
156
        
 
157
        setInterval(function() {
 
158
                var 
 
159
                        propName = '',
 
160
                        val = null,
 
161
                        td = null;
 
162
                
 
163
                for (i = 0, il = mediaPropertyNames.length; i<il; i++) {
 
164
                        propName = mediaPropertyNames[i];
 
165
                        td = $('#p_' + media.id + '_' + propName);
 
166
                        val = media[propName];
 
167
                        val = 
 
168
                                (typeof val == 'undefined') ? 
 
169
                                'undefined' : (val == null) ? 'null' : val.toString();
 
170
                        td.html(val);
 
171
                }
 
172
        }, 500);        
 
173
        
 
174
}
 
175
 
 
176
</script>
 
177
 
 
178
 
 
179
<script  type="text/javascript">
 
180
$('audio, video').bind('error', function(e) {
 
181
 
 
182
        //console.log('error',this, e, this.src, this.error.code);
 
183
});
 
184
 
 
185
jQuery(document).ready(function() {
 
186
        $('audio, video').mediaelementplayer({
 
187
                mode: 'shim',
 
188
        
 
189
                pluginPath:'../build/', 
 
190
                enablePluginSmoothing:true,
 
191
                //duration: 489,
 
192
                //startVolume: 0.4,
 
193
                enablePluginDebug: true,
 
194
                //iPadUseNativeControls: true,
 
195
                //mode: 'shim',
 
196
                //forcePluginFullScreen: true,
 
197
                usePluginFullScreen: true,
 
198
                //mode: 'native',
 
199
                //plugins: ['silverlight'],
 
200
                //features: ['playpause','volume','stop'],
 
201
                success: function(me,node) {
 
202
                        // report type
 
203
                        var tagName = node.tagName.toLowerCase();
 
204
                        $('#' + tagName + '-mode').html( me.pluginType  + ': success' + ', touch: ' + mejs.MediaFeatures.hasTouch);
 
205
 
 
206
                        
 
207
                        if (tagName == 'audio') {
 
208
 
 
209
                                me.addEventListener('progress',function(e) {
 
210
                                        //console.log(e);
 
211
                                }, false);
 
212
                        
 
213
                        }
 
214
                        
 
215
                        me.addEventListener('progress',function(e) {
 
216
                                //console.log(e);
 
217
                        }, false);
 
218
        
 
219
                        
 
220
                        // add events
 
221
                        if (tagName == 'video' && node.id == 'player1') {
 
222
                                appendMediaProperties($('#' + tagName + '-props'), me);
 
223
                                appendMediaEvents($('#' + tagName + '-events'), me);
 
224
                                
 
225
                        }
 
226
                }               
 
227
        });
 
228
        
 
229
 
 
230
 
 
231
});
 
232
 
 
233
</script>
 
234
 
 
235
 
 
236
</body>
 
237
</html>
 
 
b'\\ No newline at end of file'