Context Navigation

source: trunk/js/test/index.php @ 1194

Visit:

Revision 1194, 14.5 KB checked in by pablo, 3 years ago (diff)
Adding playerReady callback to API

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

Note: See TracBrowser for help on using the repository browser.

Download in other formats: