Context Navigation

source: trunk/fl5/js/test/index.html @ 1640

Visit:

Revision 1640, 12.8 KB checked in by zach, 2 years ago (diff)
Fixing JW Embedder testing tool

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

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

Download in other formats: