Context Navigation

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

Visit:

Revision 1206, 15.7 KB checked in by pablo, 3 years ago (diff)
Integrating embedder and API into testing tool.

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

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

Download in other formats: