source: plugins/captions/v5/test/index.html @ 1077

Revision 1077, 13.2 KB checked in by jeroen, 3 years ago (diff)

initial docs and tests for v5 captions plugin
Line 
1<html>
2<head>
3<title>JW Player Testing</title>
4<link rel="stylesheet" href="assets/style.css" type="text/css">
5<script type="text/javascript" src="assets/jquery.js"></script>
6<script type="text/javascript" src="assets/swfobject.js"></script>
7<script type="text/javascript" src="index.js"></script>
8<script type="text/javascript">
9
10
11
12
13        /**
14        * Initialization section. Parses settings.js and the browser querystring.
15        * This section is only executed on page (re)load.
16        **/
17
18        /** The complete list with all current flashvars. **/
19        var variables = {width:500,height:260};
20        /** When jQuery is loaded, we initialize everything. **/
21        $().ready(function() { loadSettings(); });
22        /** Load the settings and querystring. **/
23        function loadSettings() {
24                // load the settings.
25                for (itm in settings['examples']) { $("#examples").append("<option>"+itm+"</option>"); }
26                for (itm in settings['players']) { $("#players").append("<option>"+itm+"</option>"); }
27                for (itm in settings['skins']) { $("#skins").append("<option>"+itm+"</option>"); }
28                for (itm in settings['plugins']) { $("#plugins").append("<option>"+itm+"</option>"); }
29                // When an example is selected, we reload the entire page.
30                $("#examples").change(function(evt) {
31                        evt.preventDefault();
32                        var obj = settings.examples[$('#examples').val()];
33                        window.top.location.href = window.top.location.pathname+'?'+$.param(obj);
34                 });
35                // get the options from the querystring.
36                window.top.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g,function () {
37                        variables[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]);
38                });
39                // set the value and handler on player, skin and plugins.
40                if(variables['player']) { $('#players').val(variables['player']); }
41                $("#players").change(function(evt) { reloadFieldsets(evt); });
42                if(variables['skin']) { $('#skins').val(variables['skin']); }
43                $("#skins").change(function(evt) { insertPlayer(evt); });
44                if(variables['plugins']) { $('#plugins').val(variables['plugins'].split(',')); }
45                $("#plugins").change(function(evt) { reloadFieldsets(evt); });
46                // set the handler on the flashvars and load the whole bunch.
47                $("#flashvarsform").submit(function(evt) { insertPlayer(evt); });
48                reloadFieldsets();
49        };
50
51
52
53
54        /**
55        * Fieldset insertion section. Loads the player/plugins XML files to print the appropriate fieldsets.
56        * This section is executed every time the player/plugins selection changes.
57        **/
58
59        /** The number of XML files that still need to be parsed. **/
60        var parsing;
61        /** All variables that are inserted in an XML-defined field. **/
62        var prefilled;
63        /** Check for inserting of fieldsets. **/
64        function reloadFieldsets(evt) {
65                if(evt) { evt.preventDefault(); }
66                $("#flashvarsform > .removable").remove();
67                $("#fieldsettabs > .removable").remove();
68                $("#custom > .removable").remove();
69                parsing = 1;
70                prefilled = {plugins:'',player:'',skin:''};
71                var swf = settings.players[$("#players").val()];
72                var xml = swf.substr(0,swf.length-4) + '.xml';
73                parsePlayerXML(xml);
74                var str = $("#plugins").val();
75                if(str != null) {
76                        arr = str.toString().split(',');
77                        for (var i=0; i<arr.length; i++) {
78                                parsing++;
79                                swf = settings['plugins'][arr[i]];
80                                xml = swf.substr(0,swf.length-4) + '.xml';
81                                parsePluginXML(xml,arr[i]);
82                        }
83                }
84        };
85        /** Insert a specific plugin fieldset. **/
86        function parsePlayerXML(url) {
87                $.get(url,{},function(xml) {
88                        var arr = $('player',xml).find('flashvars');
89                        for (var i=0; i<arr.length; i++) {
90                                var nam = $(arr[i]).attr('section').toLowerCase();
91                                insertFieldset(arr[i],nam);
92                        }
93                        parsing--;
94                        if(parsing == 0) { setCustomTabbing(); }
95                });
96        };
97        /** Insert a specific plugin fieldset. **/
98        function parsePluginXML(url,nam) {
99                $.get(url,{},function(xml) {
100                        var arr = $('flashvars',xml).find('flashvar');
101                        if(arr.length > 0) {
102                                insertFieldset(xml,nam,true);
103                        }
104                        parsing--;
105                        if(parsing == 0) { setCustomTabbing(); }
106                });
107        };
108        /** Insert a specific plugin fieldset. **/
109        function insertFieldset(xml,nam,plg) {
110                var tit = nam.substr(0,1).toUpperCase()+nam.substr(1);
111                var set = '<fieldset id="'+nam+'" class="removable">';
112                var arr = $(xml).find('flashvar');
113                $("#customli").before('<li class="removable">'+tit+'</li>');
114                for (var i=0; i<arr.length; i++) {
115                        var val = $('name',arr[i]).text();
116                        if(plg) { val = nam+'.'+val; }
117                        set +='<label>'+val+'</label><input type="text" name="'+val+'" ';
118                        if(variables[val]) {
119                                set += 'value="'+variables[val]+'" ';
120                                prefilled[val] = variables[val];
121                        }
122                        set += "/>";
123                }
124                set += '</fieldset>';
125                $('#custom').before(set);
126        };
127        /** Set the custom fields and the tabbing functionality. **/
128        function setCustomTabbing() {
129                for(var itm in variables) { 
130                        if(prefilled[itm] == undefined) {
131                                var elm = '<label class="removable">'+itm+'</label>'
132                                elm += '<input type="text" name="'+itm+'" value="'+variables[itm]+'" class="removable"/>';
133                                $("#custom").append(elm);
134                        }
135                }
136                $('li').click(function() {
137                        $('li').removeClass('active');
138                        $(this).addClass('active');
139                        var itm = $(this).text().toLowerCase();
140                        doTab($.trim(itm));
141                });
142                doTab('sources');
143                insertPlayer();
144        };
145        /** Flip to a tab. **/
146        function doTab(itm) {
147                var arr = $("#flashvarsform").find('fieldset');
148                for(var i=0; i<arr.length; i++) {
149                        if($(arr[i]).attr('id') == itm) {
150                                $(arr[i]).css('display','block');
151                        } else {
152                                $(arr[i]).css('display','none');
153                        }
154                }
155        };
156
157
158
159
160        /**
161        * Player insertion section. Gathers variables from all fields and prints the player on the page.
162        * This section is executed every time the flashvars form is submitted.
163        **/
164
165        /** Print the player on the page. **/
166        function insertPlayer(evt) {
167                if(evt) { evt.preventDefault(); }
168                var vrs = {};
169                variables = {}
170                variables['player'] = $('#players').val();
171                if($("#skins").val() != 'none') {
172                        vrs['skin'] = settings['skins'][$("#skins").val()];
173                        variables['skin'] = $("#skins").val();
174                }
175                if($("#plugins").val() != null) {
176                        var plg = [];
177                        var arr = $("#plugins").val();
178                        for(var i=0; i<arr.length; i++) {
179                                plg.push(settings['plugins'][arr[i]]);
180                        }
181                        vrs['plugins'] = plg.join(',');
182                        variables['plugins'] = arr.join(',');
183                }
184                var arr = $("#flashvarsform").find('input');
185                for(var i=0; i<arr.length; i++) {
186                        if($(arr[i]).val()) {
187                                vrs[$(arr[i]).attr('name')] = $(arr[i]).val();
188                                variables[$(arr[i]).attr('name')] = $(arr[i]).val();
189                        }
190                }
191                $('#preview').css('height',vrs['height']);
192                $('#preview').html('<div id="container"></div>');
193                swfobject.embedSWF(
194                        settings.players[$('#players').val()],
195                        'container',
196                        vrs['width'],
197                        vrs['height'],
198                        '9.0.0',
199                        null,
200                        vrs,
201                        {allowfullscreen:'true',allowscriptaccess:'always'},
202                        {id:'player',name:'player'}
203                );
204        };
205
206
207
208
209        /**
210        * Player API section. Contains functions for getting a player reference and executing API calls.
211        * This section is executed when a user starts interacting with the player API.
212        **/
213
214        /** Reference to the player **/
215        var player;
216        /** When the player is ready and the API forms can be shown, display them. **/
217        function playerReady(obj) {
218                player = document.getElementById(obj['id']);
219                $("#variablesform").submit(function(evt) { getVariable(evt); });
220                $("#sendeventform").submit(function(evt) { sendEvent(evt); });
221                $("#listenersform").submit(function(evt) { setListener(evt); });
222        };
223        /** Get a variable from the player. **/
224        function getVariable(evt) {
225                evt.preventDefault();
226                switch($('#vartype').val().toString()) {
227                        case 'config':
228                                var obj = player.getConfig();
229                                break;
230                        case 'playlist':
231                                var obj = player.getPlaylist();
232                                break;
233                        case 'plugin.config':
234                                var obj = player.getPluginConfig($('#configplugin').val());
235                                break;
236                }
237                alertValue(obj);
238        };
239        /** Send an event to the player. **/
240        function sendEvent(evt) {
241                evt.preventDefault();
242                var typ = $('#sendevent').val();
243                var dat = $('#sendeventdata').val();
244                if(typ == 'LOAD' && dat.indexOf('{') > 0) {
245                        var arr = new Array();
246                        var ply = dat.split(';');
247                        for(var i=0; i<ply.length; i++) {
248                                var obj = new Object();
249                                var itm = ply[i].split(',');
250                                for(var j=0; j<itm.length; j++) {
251                                        obj[itm[j].split(':')[0]] = itm[j].split(':')[1];
252                                }
253                                arr.push(obj);
254                        }
255                        if(arr.length > 1) {
256                                dat = arr;
257                        } else { 
258                                dat = obj;
259                        }
260                }
261                player.sendEvent(typ,dat);
262        };
263        /** Set a listener to the player. **/
264        function setListener(evt) {
265                evt.preventDefault();
266                var arr = $('#eventtype').val().toString().split(': ');
267                var sel = $('#addremove').val().toString();
268                var fcn = 'alertValue';
269                if(arr.length == 2 && sel == 'add') {
270                        if(arr[0] == 'Model') {
271                                player.addModelListener(arr[1],fcn);
272                        } else { 
273                                player.addControllerListener(arr[1],fcn);
274                        }
275                } else if(arr.length == 2 && sel == 'remove') {
276                        if(arr[0] == 'Model') { 
277                                player.removeModelListener(arr[1],fcn);
278                        } else {
279                                player.removeControllerListener(arr[1],fcn);
280                        }
281                }
282        };
283        /** Alert responses from the player. **/
284        function alertValue(obj) {
285                var txt = '';
286                for (itm in obj) {
287                        if(typeof(obj[itm]) == 'object') {
288                                txt += itm+':\n';
289                                for (ent in obj[itm]) {
290                                        txt += '  '+ent+': '+obj[itm][ent]+'\n';
291                                }
292                        } else {
293                                txt += itm+': '+obj[itm]+'\n';
294                        }
295                }
296                alert(txt);
297        };
298
299
300
301
302</script>
303<style  type="text/css" media="all">
304        body { font-family: Arial, sans-serif; padding: 20px 40px; }
305        a { color: #58C; }
306        object { display: block; margin: 0 auto; border: 1px solid #FFF; }
307        form, div { margin: 0 0 40px 0; }
308        fieldset { clear:both; padding: 5px 10px 10px 10px; margin: 0; background:#F5F5F5; border: 1px solid #7A2; }
309        hr { border:0;  clear: both; display: block; height: 10px; width: 100%; }
310        legend { padding: 0; font-weight: bold; }
311        label { display: block; float: left; width: 19%; font-size: 70%; margin: 5px 0 0 0; }
312        input, select { margin: 2px 0; border: 1px solid #999; display: block; float: left; width: 80%; }
313        button { margin: 0; padding: 5px 0; width: 100%; border: 0; background: #7A2; color: #FFF; }
314        li { list-style: none; display: block; float: left; padding: 8px 16px; color: #FFF; margin-right: 2px;
315                border-bottom: 2px solid #FFF; font-size: 70%; cursor: pointer; background: #7A2; }
316        ul { display: block; padding: 0; margin: 0; }
317        p { font-size: 85%; line-height: 150%; padding: 0 0 0 19%; }
318
319        #javascript { height: 100px; display: none; }
320        #javascript form { width: 32%; margin-right: 2%; float: left; }
321        #javascript #listenersform { float: right; margin: 0; }
322        #preview { background: #F5F5F5; text-align: center; }
323        #preview a { display: block; float: right; padding: 5px 10px; font-size: 80%; color: #666; }
324        #flashvarsform li.active { border-bottom: 2px solid #7A2; cursor: default; }
325        #flashvarsform fieldset { display: none; }
326        #plugins { height: 100px; }
327</style>
328</head>
329<body>
330
331
332
333<form id="examplesform">
334        <fieldset>
335                <label>Load an example setup</label>
336                <select name="examples" id="examples"></select>
337        </fieldset>
338</form>
339
340
341
342<div id="javascript">
343        <form id="variablesform">
344                <fieldset>
345                        <label>Variable</label>
346                        <select type="text" id="vartype">
347                                <option>config</option>
348                                <option>playlist</option>
349                                <option>plugin.config</option>
350                        </select>
351                        <label>Plugin</label>
352                        <input type="text" id="configplugin" />
353                </fieldset>
354                <button type="submit" id="variablesbutton">Get variable</button>
355        </form>
356        <form id="sendeventform">
357                <fieldset>
358                        <label>Event</label>
359                        <select type="text" id="sendevent">
360                                <option>ITEM</option>
361                                <option>LINK</option>
362                                <option>LOAD</option>
363                                <option>MUTE</option>
364                                <option>NEXT</option>
365                                <option>PLAY</option>
366                                <option>PREV</option>
367                                <option>REDRAW</option>
368                                <option>SEEK</option>
369                                <option>STOP</option>
370                                <option>VOLUME</option>
371                        </select>
372                        <label>Data</label>
373                        <input type="text" id="sendeventdata" />
374                </fieldset>
375                <button type="submit" id="sendeventbutton">Send event</button>
376        </form>
377        <form id="listenersform">
378                <fieldset>
379                        <label>Type</label>
380                        <select type="text" id="addremove">
381                                <option>add</option>
382                                <option>remove</option>
383                        </select>
384                        <label>Event</label>
385                        <select type="text" id="eventtype">
386                                <option>Controller: ERROR</option>
387                                <option>Controller: ITEM</option>
388                                <option>Controller: MUTE</option>
389                                <option>Controller: PLAY</option>
390                                <option>Controller: PLAYLIST</option>
391                                <option>Controller: RESIZE</option>
392                                <option>Controller: SEEK</option>
393                                <option>Controller: STOP</option>
394                                <option>Controller: VOLUME</option>
395                                <option></option>
396                                <option>Model: BUFFER</option>
397                                <option>Model: ERROR</option>
398                                <option>Model: LOADED</option>
399                                <option>Model: META</option>
400                                <option>Model: STATE</option>
401                                <option>Model: TIME</option>
402                        </select>
403                </fieldset>
404                <button type="submit" id="listenersbutton">Set listener</button>
405        </form>
406</div>
407
408
409
410<div id="preview">
411<p>Testing is simple: choose an example, change the flashvars and see if it works.</p>
412</div>
413
414
415
416<form id="flashvarsform">
417        <ul id="fieldsettabs">
418                <li class="active">Sources</li>
419                <li id="customli">Custom</li>
420        </ul>
421        <fieldset></fieldset>
422        <fieldset id="sources">
423                <label>player</label>
424                <select id="players"></select>
425                <label>skin</label>
426                <select id="skins"></select>
427                <label>plugins</label>
428                <select multiple="multiple" id="plugins"></select>
429        </fieldset>
430        <fieldset id="custom">
431                <p>
432                        This fieldset contains variables not claimed by the player or plugin.
433                        They can be entered in the browser querystring to show up here.
434                </p>
435        </fieldset>
436        <button type="submit">Reload player</button>
437</form>
438
439
440
441</body>
442</html>
Note: See TracBrowser for help on using the repository browser.