source: testing/index.html @ 179

Revision 179, 11.6 KB checked in by jeroen, 4 years ago (diff)

tiny fix in player var
Line 
1<html>
2<head>
3        <title>JW Player Testing</title>
4        <link rel="stylesheet" href="files/style.css" type="text/css">
5        <script type="text/javascript" src="files/jquery.js"></script>
6        <script type="text/javascript" src="files/swfobject.js"></script>
7        <script type="text/javascript" src="settings.js"></script>
8        <script type="text/javascript">
9        $(document).ready(function() {
10                $.extend({
11                        /** Insert a new example in the page. **/
12                        insert: function(evt) {
13                                evt.preventDefault();
14                                var obj = settings.examples[$('#examples :selected').text()];
15                                setTimeout($.fillout,500,obj);
16                                var arr = [];
17                                if(obj['plugins']) {
18                                        arr = obj['plugins'].split(',');
19                                }
20                                $('#plugins').val(arr);
21                                $.fieldsets();
22                        },
23                        /** Fill out the flashvars with example data. **/
24                        fillout: function(obj) {
25                                var arr = $("#flashvarsform").find('input');
26                                for(var i=0; i<arr.length; i++) {
27                                        var nam = $(arr[i]).attr('name');
28                                        if(obj[nam]) {
29                                                $(arr[i]).val(obj[nam]);
30                                        } else {
31                                                $(arr[i]).val(null);
32                                        }
33                                }
34                                $("#flashvarsform").submit();
35                        },
36                        /** Set the tab functions. **/
37                        tabs: function() {
38                                $('li').click(function() {
39                                        $('li').removeClass('active');
40                                        $(this).addClass('active');
41                                        $.tab($(this).html().toLowerCase());
42                                });
43                        },
44                        /** Flip to a tab. **/
45                        tab: function(itm) {
46                                var arr = $("#flashvarsform").find('fieldset');
47                                for(var i=0; i<arr.length; i++) {
48                                        if($(arr[i]).attr('id') == itm) {
49                                                $(arr[i]).css('display','block');
50                                        } else {
51                                                $(arr[i]).css('display','none');
52                                        }
53                                }
54                        },
55                        /** Check for inserting of fieldsets. **/
56                        fieldsets: function(evt) {
57                                $("#lispan").empty();
58                                $("#fieldsetspan").empty();
59                                var str = $("#plugins").val();
60                                if(str != null) {
61                                        arr = str.toString().split(',');
62                                        for (var i=0; i<arr.length; i++) {
63                                                var swf = settings.plugins[arr[i]];
64                                                $.fieldset(swf.substr(0,swf.length-4)+'.xml',arr[i]);
65                                        }
66                                }
67                        },
68                        /** Insert a specific plugin fieldset. **/
69                        fieldset: function(url,nam) {
70                                $.get(url,{},function(xml) {
71                                        var arr = $('flashvars',xml).find('flashvar');
72                                        if(arr.length > 0) {
73                                                var tit = nam.substr(0,1).toUpperCase()+nam.substr(1);
74                                                $("#lispan").append('<li>'+tit+'</li>');
75                                                $.tabs();
76                                                var set = '<fieldset id="'+nam+'">';
77                                                for (var i=0; i<arr.length; i++) {
78                                                        var val = $('name',arr[i]).text();
79                                                        set +='<label>'+val+'</label><input name="'+nam+'.'+val+'"';
80                                                }
81                                                set += '</fieldset>';
82                                                $('#fieldsetspan').append(set);
83                                        }
84                                });
85                        },
86                        /** Reload the flashvars into the player. **/
87                        reload: function(evt) {
88                                evt.preventDefault();
89                                var vrs = {};
90                                var arr = $("#flashvarsform").find('input');
91                                for(var i=0; i<arr.length; i++) {
92                                        if($(arr[i]).val()) {
93                                                vrs[$(arr[i]).attr('name')] = $(arr[i]).val();
94                                        }
95                                }
96                                if($("#skins").val() != 'none') {
97                                        vrs['skin'] = settings.skins[$("#skins").val()];
98                                }
99                                if($("#plugins").val() != null) {
100                                        var plg = '';
101                                        var arr = $("#plugins").val();
102                                        for(var i=0; i<arr.length; i++) {
103                                                plg += settings.plugins[arr[i]]+',';
104                                        }
105                                        vrs['plugins'] = plg.substr(0,plg.length-1);
106                                }
107                                $('#preview').css('height',vrs['height']);
108                                $('#preview').html('<div id="container"></div>');
109                                swfobject.embedSWF(
110                                        settings.players[$('#players').val()],
111                                        'container',
112                                        vrs['width'],
113                                        vrs['height'],
114                                        '9.0.0',
115                                        null,
116                                        vrs,
117                                        {allowfullscreen:'true',allowscriptaccess:'always'},
118                                        {id:'ply',name:'ply'}
119                                );
120                        },
121                        /** Get a variable from the player. **/
122                        getVariable: function(evt) {
123                                evt.preventDefault();
124                                switch($('#type').val()) {
125                                        case 'config':
126                                                var obj = player.getConfig();
127                                                break;
128                                        case 'playlist':
129                                                var obj = player.getPlaylist();
130                                                break;
131                                        case 'plugin.config':
132                                                var obj = player.getPluginConfig($('#configplugin').val());
133                                                break;
134                                }
135                                $.alert(obj)
136                        },
137                        /** Send an event to the player. **/
138                        sendEvent: function(evt) {
139                                evt.preventDefault();
140                                player.sendEvent($('#sendevent').val(),$('#sendeventdata').val());
141                        },
142                        /** Set a listener to the player. **/
143                        setListener: function(evt) {
144                                evt.preventDefault();
145                                var arr = $('#eventtype').val().split(': ');
146                                var sel = $('#addremove').val();
147                                var fcn = '$.alert';
148                                if(arr.length == 2 && sel == 'add') {
149                                        if(arr[0] == 'Model') {
150                                                player.addModelListener(arr[1],fcn);
151                                        } else { 
152                                                player.addControllerListener(arr[1],fcn);
153                                        }
154                                } else if(arr.length == 2 && sel == 'remove') {
155                                        if(arr[0] == 'Model') { 
156                                                player.removeModelListener(arr[1],fcn);
157                                        } else {
158                                                player.removeControllerListener(arr[1],fcn);
159                                        }
160                                }
161                        },
162                        /** Alert responses from the player. **/
163                        alert: function(obj) {
164                                var txt = '';
165                                $.each(obj,function(prm,val) {
166                                        if(typeof(prm) == 'number') {
167                                                txt += prm+':\n';
168                                                $.each(val,function(i,j) {
169                                                        txt += '  '+i+': '+j+'\n';
170                                                });
171                                        } else { 
172                                                txt += prm+': '+val+'\n';
173                                        }
174                                });
175                                alert(txt);
176                        }
177                });
178                /** Attach handlers to all buttons and select fields. **/
179                $("#examples").change(function(evt) { $.insert(evt); });
180                $("#players").change(function(evt) { $.reload(evt); });
181                $("#skins").change(function(evt) { $.reload(evt); });
182                $("#plugins").change(function(evt) { $.fieldsets(evt); });
183                $("#examplesform").submit(function(evt) { $.insert(evt); });
184                $("#flashvarsform").submit(function(evt) { $.reload(evt); });
185                $("#variablesform").submit(function(evt) { $.getVariable(evt); });
186                $("#sendeventform").submit(function(evt) { $.sendEvent(evt); });
187                $("#listenersform").submit(function(evt) { $.setListener(evt); });
188                /** Load all settings into the player. **/
189                for (dct in settings) {
190                        for (itm in settings[dct]) {
191                                $("#"+dct).append("<option>"+itm+"</option>");
192                        }
193                }
194                $.tabs();
195        });
196        </script>
197
198</head>
199<body>
200
201
202<form id="examplesform">
203        <fieldset>
204                <legend>Example setups</legend>
205                <label>example</label>
206                <select name="examples" id="examples"></select>
207        </fieldset>
208        <button type="submit" id="examplesbutton">Insert</button>
209</form>
210
211
212
213
214<div id="javascript">
215        <form id="variablesform">
216                <fieldset>
217                        <legend>Get variables</legend>
218                        <label>Variable</label>
219                        <select type="text" id="type">
220                                <option>config</option>
221                                <option>playlist</option>
222                                <option>plugin.config</option>
223                        </select>
224                        <label>Plugin</label>
225                        <input type="text" id="configplugin" />
226                </fieldset>
227                <button type="submit" id="variablesbutton">Get</button>
228        </form>
229        <form id="sendeventform">
230                <fieldset>
231                        <legend>Send events</legend>
232                        <label>Event</label>
233                        <select type="text" id="sendevent">
234                                <option>LINK</option>
235                                <option>LOAD</option>
236                                <option>MUTE</option>
237                                <option>NEXT</option>
238                                <option>ITEM</option>
239                                <option>PLAY</option>
240                                <option>PREV</option>
241                                <option>REDRAW</option>
242                                <option>SEEK</option>
243                                <option>STOP</option>
244                                <option>VOLUME</option>
245                        </select>
246                        <label>Data</label>
247                        <input type="text" id="sendeventdata" />
248                </fieldset>
249                <button type="submit" id="sendeventbutton">Send</button>
250        </form>
251        <form id="listenersform">
252                <fieldset>
253                        <legend>Set listeners</legend>
254                        <label>Add or remove</label>
255                        <select type="text" id="addremove">
256                                <option>add</option>
257                                <option>remove</option>
258                        </select>
259                        <label>Event</label>
260                        <select type="text" id="eventtype">
261                                <option>Controller: ERROR</option>
262                                <option>Controller: ITEM</option>
263                                <option>Controller: MUTE</option>
264                                <option>Controller: PLAY</option>
265                                <option>Controller: PLAYLIST</option>
266                                <option>Controller: RESIZE</option>
267                                <option>Controller: SEEK</option>
268                                <option>Controller: STOP</option>
269                                <option>Controller: VOLUME</option>
270                                <option></option>
271                                <option>Model: BUFFER</option>
272                                <option>Model: ERROR</option>
273                                <option>Model: LOADED</option>
274                                <option>Model: META</option>
275                                <option>Model: STATE</option>
276                                <option>Model: TIME</option>
277                        </select>
278                </fieldset>
279                <button type="submit" id="listenersbutton">Update</button>
280        </form>
281        <hr />
282</div>
283
284
285
286
287<div id="preview">
288<a href="http://developer.longtailvideo.com/trac/FlashTesting">Learn how to use this testing page</a></div>
289</div>
290
291<script type="text/javascript">
292        var player;
293        function playerReady(obj) {
294                player = document.getElementById(obj['id']);
295                $('#javascript').css('display','block');
296        };
297</script>
298
299
300
301
302
303<form id="flashvarsform">
304        <ul>
305                <li class="active">Sources</li>
306                <li>Properties</li>
307                <li>Layout</li>
308                <li>Behaviour</li>
309                <li>Miscellaneous</li>
310                <span id="lispan"></span>
311        </ul>
312        <fieldset id="sources">
313                <label>player</label>
314                <select type="text" id="players"></select>
315                <label>skin</label>
316                <select id="skins"></select>
317                <label>plugins</label>
318                <select multiple="multiple" id="plugins">
319                </select>
320        </fieldset>
321        <fieldset id="properties">
322                <label>author</label>
323                <input type="text" name="date" />
324                <label>captions</label>
325                <input type="text" name="captions" />
326                <label>date</label>
327                <input type="text" name="author" />
328                <label>description</label>
329                <input type="text" name="description" />
330                <label>duration</label>
331                <input type="text" name="duration" />
332                <label>file</label>
333                <input type="text" name="file" />
334                <label>image</label>
335                <input type="text" name="image" />
336                <label>link</label>
337                <input type="text" name="link" />
338                <label>start</label>
339                <input type="text" name="start" />
340                <label>streamer</label>
341                <input type="text" name="streamer" />
342                <label>tags</label>
343                <input type="text" name="tags" />
344                <label>title</label>
345                <input type="text" name="title" />
346                <label>type</label>
347                <input type="text" name="type" />
348        </fieldset>
349        <fieldset id="layout">
350                <label>backcolor</label>
351                <input type="text" name="backcolor" />
352                <label>controlbar</label>
353                <input type="text" name="controlbar" />
354                <label>frontcolor</label>
355                <input type="text" name="frontcolor" />
356                <label>height</label>
357                <input type="text" name="height" />
358                <label>lightcolor</label>
359                <input type="text" name="lightcolor" />
360                <label>playlist</label>
361                <input type="text" name="playlist" />
362                <label>playlistsize</label>
363                <input type="text" name="playlistsize" value=""/>
364                <label>screencolor</label>
365                <input type="text" name="screencolor" />
366                <label>width</label>
367                <input type="text" name="width" />
368        </fieldset>
369        <fieldset id="behaviour">
370                <label>autostart</label>
371                <input type="text" name="autostart" />
372                <label>bufferlength</label>
373                <input type="text" name="bufferlength" />
374                <label>displayclick</label>
375                <input type="text" name="displayclick" />
376                <label>icons</label>
377                <input type="text" name="icons" />
378                <label>item</label>
379                <input type="text" name="item" />
380                <label>logo</label>
381                <input type="text" name="logo" />
382                <label>mute</label>
383                <input type="text" name="mute" />
384                <label>replace</label>
385                <input type="text" name="replace" />
386                <label>repeat</label>
387                <input type="text" name="repeat" />
388                <label>resizing</label>
389                <input type="text" name="resizing" />
390                <label>respectduration</label>
391                <input type="text" name="respectduration" />
392                <label>shuffle</label>
393                <input type="text" name="shuffle" />
394                <label>smoothing</label>
395                <input type="text" name="smoothing" />
396                <label>stretching</label>
397                <input type="text" name="stretching" />
398                <label>volume</label>
399                <input type="text" name="volume" />
400        </fieldset>
401        <fieldset id="miscellaneous">
402                <label>abouttext</label>
403                <input type="text" name="abouttext" />
404                <label>aboutlink</label>
405                <input type="text" name="aboutlink" />
406                <label>config</label>
407                <input type="text" name="config" />
408                <label>id</label>
409                <input type="text" name="id" />
410                <label>linktarget</label>
411                <input type="text" name="linktarget" />
412        </fieldset>
413        <span id="fieldsetspan"></span>
414        <button type="submit" id="flashvarsbutton">Reload</button>
415</form>
416
417
418
419</body>
420</html>
Note: See TracBrowser for help on using the repository browser.