Using Javascript to Change Feeds

36 replies [Last post]

Posted: Thu, 2007-06-14 04:26 Michael C. Brook

Hi,

I just recently posted questions about using a PHP parser in order to make external video rss feeds work with the player (http://jeroenwijering.com/?thread=6091), but I am putting this question in a separate post because it is more related to javascript. I got the PHP parser scripts from here: http://jeroenwijering.com/?thread=5752 and then referenced the PHP files in the javascript code on my page, which goes like this...

function createPlayer() {
var fil1 = "http://michaelcbrook.com/cgi/tv.bliptv_most_popular1.php";
var fil2 = "http://michaelcbrook.com/cgi/tv.googlevideo_top_100.1.php";
var fil3 = "http://michaelcbrook.com/cgi/tv.dailymotion.1.php";
var fil4 = "http://michaelcbrook.com/cgi/tv.reuters_top_news1.php";
var fil5 = "http://michaelcbrook.com/cgi/tv.archive.org_most_recent1.php";
	var s = new SWFObject('http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf','mpl','850','395','7');
	s.addParam('allowfullscreen','true');
	s.addVariable('displayheight','375');
	s.addVariable('file', fil2);
	s.addVariable('height','395');
	s.addVariable('width','850');
	s.addVariable('frontcolor','0xCCCCCC');
	s.addVariable('backcolor','0x000000');
	s.addVariable('lightcolor','0x0099CC');
	s.addVariable('displaywidth','500');
	s.addVariable('location','http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf');
	s.addVariable('autostart','true');
	s.addVariable('repeat','true');
	s.addVariable('rotatetime','0');
	s.addVariable('shuffle','false');
	s.addVariable('enablejs','true');
	s.addVariable('linktarget','_blank');
	s.addVariable('shuffle','false');
	s.write('player');
};
</script>

So everything works great now, but I have a simple question that maybe someone who knows javascript better than I do could answer. How do you switch between the different PHP scripts in order to play a different feed when you click on a button or link?

Posted: Thu, 2007-06-14 04:48 andersen

see the multipleplaylists example on this [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/multipleplaylists.htm]demo page[/url]

it shows both how to use links and dropdownboxes to change playlists...

Posted: Thu, 2007-06-14 04:49 andersen

and there are [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]more demos here[/url]

Posted: Thu, 2007-06-14 06:39 Michael C. Brook

Thanks. I forgot all about the loadFile function I had. I looked at the demos and I was able to get it working using links and standard buttons, but I am now trying to use radio buttons, but I can't seem to get it to work. Here's my code:

<head>
  <script type="text/javascript"
 src="http://michaelcbrook.com/flash%20media%20player%20docs/swfobject.js"></script>
<script type="text/javascript">
                function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
	};
	// some variables to save
	var currentPosition;
	var currentVolume;
	var currentItem;
	// these functions are caught by the JavascriptView object of the player.
	function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "time") { currentPosition = pr1; }
		else if(typ == "volume") { currentVolume = pr1; }
		else if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
		var id = document.getElementById(typ);
		id.innerHTML = typ+ ": "+Math.round(pr1);
		pr2 == undefined ? null: id.innerHTML += ", "+Math.round(pr2);
		if(pid != "null") {
			document.getElementById("pid").innerHTML = "(received from the player with id <i>"+pid+"</i>)";
		}
	};
	function getItemData(idx) {
		var obj = thisMovie("mpl").itemData(idx);
		var tmp=obj["file"]; 
		if(tmp!="") {
			var theURL='<a href="'+tmp+'">Download this song</a>'; 
			document.getElementById("theLink").innerHTML = theURL; 
		} else document.getElementById("theLink").innerHTML = ""; 
	};
	// This is a javascript handler for the player and is always needed.
	function thisMovie(movieName) {
	    if(navigator.appName.indexOf("Microsoft") != -1) {
			return window[movieName];
		} else {
			return document[movieName];
		}
	};
	// These functions are caught by the feeder object of the player.
	function loadFile(obj) { thisMovie("mpl").loadFile(obj); };
	function addItem(obj,idx) { thisMovie("mpl").addItem(obj,idx); }
	function removeItem(idx) { thisMovie("mpl").removeItem(idx); }
function itemData(obj) {
var nodes = "";
nodes += ""+obj['title']+"<br><small>by </small>"+obj['author']+""; 
document.getElementById("data").innerHTML = nodes;
};
function recreatePlayer() {
	sendEvent("stop"); 
	setTimeout("createPlayer()",1);	
};
function createPlayer(theFile) {
	var s = new SWFObject('http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf','mpl','850','395','7');
	s.addParam('allowfullscreen','true');
	s.addVariable('displayheight','375');
	s.addVariable('file',theFile);
	s.addVariable('height','395');
	s.addVariable('width','850');
	s.addVariable('frontcolor','0x000000');
	s.addVariable('backcolor','0xF0F0F0');
	s.addVariable('lightcolor','0x00759B');
	s.addVariable('displaywidth','500');
	s.addVariable('location','http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf');
	s.addVariable('autostart','true');
	s.addVariable('repeat','true');
	s.addVariable('rotatetime','0');
	s.addVariable('shuffle','false');
	s.addVariable('enablejs','true');
	s.addVariable('linktarget','_blank');
	s.addVariable('shuffle','false');
	s.write('player');
};
</script>
</head>
<body onload="createPlayer(document.theForm.tvchannel.value)">
<form id="theForm" name="theForm">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.bliptv_most_popular1.php" onclick="javascript:createPlayer(document.theForm.tvchannel.value)">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.googlevideo_top_100.1.php" onclick="javascript:createPlayer(document.theForm.tvchannel.value)">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.dailymotion.1.php" onclick="javascript:createPlayer(document.theForm.tvchannel.value)">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.reuters_top_news1.php" onclick="javascript:createPlayer(document.theForm.tvchannel.value)">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.archive.org_most_recent1.php" onclick="javascript:createPlayer(document.theForm.tvchannel.value)">
</form>
<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</div>
</body>

Can you see what is wrong with it?

Posted: Thu, 2007-06-14 10:47 Will

Please review the page code for this page [url=http://www.jeroenwijering.com/extras/javascript.html]JAVASCRIPT CONTROL EXAMPLESclick here[/url].

You don't want the Flash player in a function.

Move the player code into the <body>, but NOT inside the <form>.

You need this line in your player code to link the player to the JavaScript functions:

s.addVariable("javascriptid","mpl");

To keep your page clean, copy and paste the JavaScript code from the <head> into a file, "additional.js" and then call it just like you call "swfobject.js".

Posted: Thu, 2007-06-14 10:54 andersen

getting the values of radiobuttons is a little more tricky than the other formelements...

instead of:
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.archive.org_most_recent1.php" onclick="javascript:createPlayer(document.theForm.tvchannel.value)">

try like this:
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.archive.org_most_recent1.php" onclick="javascript:createPlayer(this.value)">

now, that wont do for the onload handler, so to avoid making yet a function to check which of the radiobuttons have their checked property true - i suggest you just start with a fixed value...

Posted: Thu, 2007-06-14 11:06 andersen

@Will
i read Michael C. Brooks code differently:
the player is not in a function, only the creation script - thats fine...
the playercreation code should not be moved from where it is (as last line says too)

it is correct that the s.addVariable("javascriptid","mpl"); is missing.

i personally prefer not to use external .js files until everything works, and then it matters less (except for reuse)

Posted: Thu, 2007-06-14 11:31 Will

@andersen,

If he wraps the Flash player code in a function and creates a player once, in <body onload=..., then wouldn't he want to use the Flash player's JavaScript API functions to load new playlists, since he has the JavaScript connecting functions in the <head> ??

I realize that you can mix the methods, but why re-create the player everytime that you load a new playlist?

Posted: Thu, 2007-06-14 11:56 andersen

@Will
it can be seen as superfluous to recreate the player instead of creating once, and then issuing loading and play commands - but it is just as valid a method and even have its unique advantages such as load and play with only one command and no worries...

Posted: Thu, 2007-06-14 12:04 Will

@andersen,

I especially like the "no worries..." part.

That's a good point, only one command, no setTimeout(), sendEvent()...

Posted: Thu, 2007-06-14 12:06 andersen

@Will
another point is the method that is used in the download - that is the usual method of placing the SWFObject script in the page - inline script as some call it - is not to be considered "good practice" - scripts belong in the head where they can be executed in a controlled fashion.

when scripts get executed during the page buildup, allsorts of unpredictable effects can happen (but luckily usually dont)

so the better practice is to have the creating script in the head - even if you only execute the create function once...

Posted: Thu, 2007-06-14 18:07 Michael C. Brook

Thanks. I got it working by just putting in onclick="javascript:createPlayer(this.value)" instead of document.theForm.tvchannel.value. But now, what do I put in the body onload? And would it be possible to load the last radio button that was "checked" when a user comes back to the page?

Posted: Fri, 2007-06-15 02:03 Michael C. Brook

Okay, I figured out how to save the last selection the user made, but all I need now is something valid to put in the <body onload="createPlayer(...)"> that will follow the selection made in the radio button in order to load that "channel." I can't seem to figure out what should be there. Does anyone know how to do that?

Posted: Fri, 2007-06-15 02:33 andersen

for years i have been using this little loop to see which radiobutton is checked:

var tmpObj=document.theForm.tvchannel;
for (i=0; i<tmpObj.length; i++) { if(tmpObj[i].checked) var k = i; }

you can see it in action here: [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer_wizard.html]wizard[/url] (deep in the code)

its hard to believe that there is no simpler method to know which radiobutton is checked - and there might be, and i just dont know?...

did you use a cookie to save the select value?
would you care to share your solution?

Posted: Fri, 2007-06-15 03:05 Michael C. Brook

I'm sorry if this sounds like a stupid question, but where does that piece of code go, and how is it referenced in the body onload? I looked through the "wizard" link's code, but it is very complicated and I can't seem to figure it out. Did I mention that I only know a little javascript? :) And yes, I did use a cookie. I will share my whole code after I get this properly working, so it's complete when I post it.

Posted: Fri, 2007-06-15 03:29 andersen

there is ofcourse many ways of dooing it - all depending...
when the loop is through, the number of the checked radiobutton is in the variable k.

what you need to do is ever so slightly convoluted...

instead of calling createPlayer in the radiobutton onclick, call a funtion

var k;
function setVar(){
var tmpObj=document.theForm.tvchannel;
for (i=0; i<tmpObj.length; i++) { if(tmpObj[i].checked) k = i; }
//call set cookie here
}

then you need an array with the playlist paths or to save the playlist paths in the cookie.
then onload you check the cookie, look up the path and serve it to the createPlayer function...

it would be so much more simple if you would settle for a dropdownbox ;)

by the way, a tip - for debugging the <strong>alert can be extremely useful:
alert('result is:'+somevariable); i use it all the time to see whats going on internally in my scripts...

Posted: Fri, 2007-06-15 04:32 andersen

actually you can get the paths like this: document.theForm.tvchannel[k].value

but the whole thing is depending on how you do the cookie stuff...
if you read the cookie onload and set the radiobutton checked property accordingly, you can have the createPlayer just look for which radiobutton is checked when creating, instead of transferring the parameter to the function...

Posted: Fri, 2007-06-15 04:46 Michael C. Brook

Wow. This is confusing. I am totally lost, but that's ok :d I attempted to take the code and call the cookie at the end, and I changed the onclick for the radio buttons to setVar(), but I don't even know if I did it right or what to do next. Here's my lengthy code so far:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Nick Baker -->
<!-- Begin
// Cookie Functions  ////////////////////  (:)
// Set the cookie.
// SetCookie('your_cookie_name', 'your_cookie_value', exp);
// Get the cookie.
// var someVariable = GetCookie('your_cookie_name');
var expDays = 100;
var exp = new Date(); 
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function getCookieVal (offset) {  
	var endstr = document.cookie.indexOf (";", offset);  
	if (endstr == -1) { endstr = document.cookie.length; }
	return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {  
	var arg = name + "=";  
	var alen = arg.length;  
	var clen = document.cookie.length;  
	var i = 0;  
	while (i < clen) {    
		var j = i + alen;    
		if (document.cookie.substring(i, j) == arg) return getCookieVal (j);    
		i = document.cookie.indexOf(" ", i) + 1;    
		if (i == 0) break;   
	}  
	return null;
}
function SetCookie (name, value) {  
	var argv = SetCookie.arguments;  
	var argc = SetCookie.arguments.length;  
	var expires = (argc > 2) ? argv[2] : null;  
	var path = (argc > 3) ? argv[3] : null;  
	var domain = (argc > 4) ? argv[4] : null;  
	var secure = (argc > 5) ? argv[5] : false;  
	document.cookie = name + "=" + escape (value) + 
	((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
	((path == null) ? "" : ("; path=" + path)) +  
	((domain == null) ? "" : ("; domain=" + domain)) +    
	((secure == true) ? "; secure" : "");
}
// cookieForms saves form content of a page.
// use the following code to call it:
//  <body onLoad="cookieForms('open', 'form_1', 'form_2', 'form_n')" onUnLoad="cookieForms('save', 'form_1', 'form_2', 'form_n')">
// It works on text fields and dropdowns in IE 5+
// It only works on text fields in Netscape 4.5
function cookieForms() {  
	var mode = cookieForms.arguments[0];
	for(f=1; f<cookieForms.arguments.length; f++) {
		formName = cookieForms.arguments[f];
		if(mode == 'open') {	
			cookieValue = GetCookie('saved_'+formName);
			if(cookieValue != null) {
				var cookieArray = cookieValue.split('#cf#');
				if(cookieArray.length == document[formName].elements.length) {
					for(i=0; i<document[formName].elements.length; i++) {
						if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }
						else if((cookieArray[i] == 'cbtrue') || (cookieArray[i] == 'rbtrue')) { document[formName].elements[i].checked = true; }
						else if((cookieArray[i] == 'cbfalse') || (cookieArray[i] == 'rbfalse')) { document[formName].elements[i].checked = false; }
						else { document[formName].elements[i].value = (cookieArray[i]) ? cookieArray[i] : ''; }
					}
				}
			}
		}
		if(mode == 'save') {	
			cookieValue = '';
			for(i=0; i<document[formName].elements.length; i++) {
				fieldType = document[formName].elements[i].type;
				if(fieldType == 'password') { passValue = ''; }
				else if(fieldType == 'checkbox') { passValue = 'cb'+document[formName].elements[i].checked; }
				else if(fieldType == 'radio') { passValue = 'rb'+document[formName].elements[i].checked; }
				else if(fieldType == 'select-one') { passValue = 'select'+document[formName].elements[i].options.selectedIndex; }
				else { passValue = document[formName].elements[i].value; }
				cookieValue = cookieValue + passValue + '#cf#';
			}
			cookieValue = cookieValue.substring(0, cookieValue.length-4); // Remove last delimiter
			SetCookie('saved_'+formName, cookieValue, exp);		
		}	
	}
}
//  End -->
</script>
  <script type="text/javascript"
 src="http://michaelcbrook.com/flash%20media%20player%20docs/swfobject.js"></script>
<script type="text/javascript">
                function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
	};
	// some variables to save
	var currentPosition;
	var currentVolume;
	var currentItem;
	// these functions are caught by the JavascriptView object of the player.
	function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "time") { currentPosition = pr1; }
		else if(typ == "volume") { currentVolume = pr1; }
		else if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
		var id = document.getElementById(typ);
		id.innerHTML = typ+ ": "+Math.round(pr1);
		pr2 == undefined ? null: id.innerHTML += ", "+Math.round(pr2);
		if(pid != "null") {
			document.getElementById("pid").innerHTML = "(received from the player with id <i>"+pid+"</i>)";
		}
	};
	function getItemData(idx) {
		var obj = thisMovie("mpl").itemData(idx);
		var tmp=obj["file"]; 
		if(tmp!="") {
			var theURL='<a href="'+tmp+'">Download this song</a>'; 
			document.getElementById("theLink").innerHTML = theURL; 
		} else document.getElementById("theLink").innerHTML = ""; 
	};
	// This is a javascript handler for the player and is always needed.
	function thisMovie(movieName) {
	    if(navigator.appName.indexOf("Microsoft") != -1) {
			return window[movieName];
		} else {
			return document[movieName];
		}
	};
	// These functions are caught by the feeder object of the player.
	function loadFile(obj) { thisMovie("mpl").loadFile(obj); };
	function addItem(obj,idx) { thisMovie("mpl").addItem(obj,idx); }
	function removeItem(idx) { thisMovie("mpl").removeItem(idx); }
function itemData(obj) {
var nodes = "";
nodes += ""+obj['title']+"<br><small>by </small>"+obj['author']+""; 
document.getElementById("data").innerHTML = nodes;
};
function recreatePlayer() {
	sendEvent("stop"); 
	setTimeout("createPlayer()",1);	
};
var k;
function setVar(){
var tmpObj=document.theForm.tvchannel;
for (i=0; i<tmpObj.length; i++) { if(tmpObj[i].checked) k = i; }
cookieForms('open', 'theForm');
//call set cookie here
};
function createPlayer(theFile) {
	var s = new SWFObject('http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf','mpl','850','395','7');
	s.addParam('allowfullscreen','true');
	s.addVariable('displayheight','375');
	s.addVariable('file',theFile);
	s.addVariable('height','395');
	s.addVariable('width','850');
	s.addVariable('frontcolor','0x000000');
	s.addVariable('backcolor','0xF0F0F0');
	s.addVariable('lightcolor','0x00759B');
	s.addVariable('displaywidth','500');
	s.addVariable('location','http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf');
	s.addVariable('autostart','true');
	s.addVariable('repeat','true');
	s.addVariable('rotatetime','0');
	s.addVariable('shuffle','false');
	s.addVariable('enablejs','true');
	s.addVariable('javascriptid','mpl');
	s.addVariable('linktarget','_blank');
	s.addVariable('shuffle','false');
	s.write('player');
};
</script>
</head>
<body onload="cookieForms('open', 'theForm'); createPlayer(document.theForm.tvchannel.value)" onunload="cookieForms('save', 'theForm')">
<form id="theForm" name="theForm">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.bliptv_most_popular1.php" onclick="javascript:setVar()">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.googlevideo_top_100.1.php" onclick="javascript:setVar()">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.dailymotion.1.php" onclick="javascript:setVar()">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.reuters_top_news1.php" onclick="javascript:setVar()">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.archive.org_most_recent1.php" onclick="javascript:setVar()">
</form>
<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</div>
</body>

Can you make any sense out of this? What do I need to change/add/remove?

Posted: Fri, 2007-06-15 05:31 andersen

well, no wonder you get confused - its amazing how complicated, seemingly simple things can get on occation (thats why i use a dropdown in the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/multipleplaylists.htm]demo[/url])

i need some time to sort this out, i think it will get to complicated to explain step by step - so i will just see if i can get something simple working that matches your requirements, and then return asap - ok?

(this is perfect timing for me, as i was contemplating the making of a kind of cookie playlist, and now you give an opportunity to look into something quite related :) )

Posted: Fri, 2007-06-15 11:26 andersen

ok - heres a working demo of multipleplaylists and storing the current in a cookie: [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/radiocookie.htm]radiocookie[/url]
and for comparison [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/dropdowncookie.htm]dropdowncookie[/url]

as you can see the radiobutton version is somewhat more complicated.
here are more [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]demos[/url] - enjoy

Posted: Fri, 2007-06-15 12:19 Will

@andersen,

I'm hungry, send me some "radiocookies" ASAP. :)

Posted: Fri, 2007-06-15 18:16 Michael C. Brook

It works! :d Finally. But I found out that I was having a conflict with another function I had, which coincidentally was also named "init()" It was from a code that made a "bungee" effect with the mouse. Who knows how long that has messed me up :p Anyway, thanks for the help, but I do have one more question (I hope it isn't too much to ask for). Is there a way to make it so the text next to the radio button can be clicked as well and it will have the same result as just clicking the radio button itself?

Posted: Fri, 2007-06-15 18:44 andersen

just make the text lines links and call the same functions as the radiobuttons, unfortunately this wont set the radiobuttons them selves, so that will have to be done seperately...

Posted: Fri, 2007-06-15 19:15 Michael C. Brook

I got it now. It was easier than I thought. Thanks. Now that I'm done, I guess I'll post my finished code for anyone who is interested (I also threw in my mouse bungee code)...

<head>
  <script type="text/javascript"
 src="http://michaelcbrook.com/flash%20media%20player%20docs/swfobject.js"></script>
<!--
// == This is the bungee mouse code == //
// == This Script Free To Use Providing This Notice Remains == // // == This Script Has Been In The http://www.DesignerWiz.com Javascript Public Archive Library == // // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == //
-->
  <div id="dot0"
 style="position: absolute; visibility: hidden; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <div id="dot1"
 style="position: absolute; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <div id="dot2"
 style="position: absolute; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <div id="dot3"
 style="position: absolute; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <div id="dot4"
 style="position: absolute; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <div id="dot5"
 style="position: absolute; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <div id="dot6"
 style="position: absolute; height: 11px; width: 11px;"><img
 src="http://michaelcbrook.com/images/mousecursorbullet.gif"
 height="11" width="11"></div>
  <script language="JavaScript">
<!-- Original: Philip Winston (pwinston@yahoo.com) -->
<!-- Web Site: http://members.xoom.com/ebullets -->
<!-- 'Scrolling Fix' by Troels Jakobsen <tjak@get2net.dk> -->
<!-- This script found at Development Resource &amp; JavaScript Public Archive Center -->
<!-- http://www.DesignerWiz.com -->
<!-- Begin
var nDots = 7;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init2();
function init2() {
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
if (!isNetscape) {
// I only know how to read the locations of the // <LI> items in IE
//skip this for now
// setInitPositions(dots)
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) {
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 3000);
}
}
function dot(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) { this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}
function startanimate() { setInterval("animate()", 20);
}
function setInitPositions(dots) {
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY; return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop; }
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() { var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos; start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else { height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; }
}
// End -->
  </script>
<SCRIPT LANGUAGE="JavaScript"><!--
function click(which) {
    document.theForm.tvchannel[which].checked = true;
}
//--></SCRIPT>
<script type="text/javascript">
                function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
	};
	// some variables to save
	var currentPosition;
	var currentVolume;
	var currentItem;
	// these functions are caught by the JavascriptView object of the player.
	function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
	function getUpdate(typ,pr1,pr2,pid) {
		if(typ == "time") { currentPosition = pr1; }
		else if(typ == "volume") { currentVolume = pr1; }
		else if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
		var id = document.getElementById(typ);
		id.innerHTML = typ+ ": "+Math.round(pr1);
		pr2 == undefined ? null: id.innerHTML += ", "+Math.round(pr2);
		if(pid != "null") {
			document.getElementById("pid").innerHTML = "(received from the player with id <i>"+pid+"</i>)";
		}
	};
	function getItemData(idx) {
		var obj = thisMovie("mpl").itemData(idx);
		var tmp=obj["file"]; 
		if(tmp!="") {
			var theURL='<a href="'+tmp+'">Download this song</a>'; 
			document.getElementById("theLink").innerHTML = theURL; 
		} else document.getElementById("theLink").innerHTML = ""; 
	};
	// This is a javascript handler for the player and is always needed.
	function thisMovie(movieName) {
	    if(navigator.appName.indexOf("Microsoft") != -1) {
			return window[movieName];
		} else {
			return document[movieName];
		}
	};
	// These functions are caught by the feeder object of the player.
	function loadFile(obj) { thisMovie("mpl").loadFile(obj); };
	function addItem(obj,idx) { thisMovie("mpl").addItem(obj,idx); }
	function removeItem(idx) { thisMovie("mpl").removeItem(idx); }
function itemData(obj) {
var nodes = "";
nodes += ""+obj['title']+"<br><small>by </small>"+obj['author']+""; 
document.getElementById("data").innerHTML = nodes;
};
function recreatePlayer() {
	sendEvent("stop"); 
	setTimeout("createPlayer()",1);	
};
var cookiename = "radiocookiedemo";
function storecookie(arg) {
    var expiration = new Date((new Date()).getTime() + 31536000000);
    var cookie = cookiename + '=' + arg;
    cookie += '; expires=' + expiration.toGMTString();
    document.cookie = cookie;
}
function loadcookie() {
    var allcookies = document.cookie;
    if (allcookies == "") return false;
    var start = allcookies.indexOf(cookiename + '=');
    if (start == -1) return false;
    start += cookiename.length + 1;
    var end = allcookies.indexOf(';', start);
    if (end == -1) end = allcookies.length;
    var cookie = allcookies.substring(start, end);
    return cookie;
}
function killcookie() {
    if (confirm("Do you really want to clear the cookie?")) {
        var cookie;
        cookie = cookiename + '=';
        cookie += '; expires=Fri, 02-Jan-1970 00:00:00 GMT';
        document.cookie = cookie;
    }
}
function init() {
    var tmpObj=document.theForm.tvchannel;
    if (loadcookie() != false) {
      tmpObj[loadcookie()].checked=true; 
    } else {
      tmpObj[0].checked=true; 
    }
    createPlayer(tmpObj[getRadioIndex()].value);
}
function reload() {
    var tmpObj=document.theForm.tvchannel;
    createPlayer(tmpObj[getRadioIndex()].value);
}
function getRadioIndex() {
    var tmpObj=document.theForm.tvchannel;
    for (i=0; i<tmpObj.length; i++) { if(tmpObj[i].checked) var radioIndex = i; }
    return radioIndex;
}
function createPlayer(theFile) {
	var s = new SWFObject('http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf','mpl','850','395','7');
	s.addParam('allowfullscreen','true');
	s.addVariable('displayheight','375');
	s.addVariable('file',theFile);
	s.addVariable('height','395');
	s.addVariable('width','850');
	s.addVariable('frontcolor','0x000000');
	s.addVariable('backcolor','0xF0F0F0');
	s.addVariable('lightcolor','0x00759B');
	s.addVariable('displaywidth','500');
	s.addVariable('location','http://michaelcbrook.com/flash%20media%20player%20docs/mediaplayer.swf');
	s.addVariable('autostart','true');
	s.addVariable('repeat','true');
	s.addVariable('rotatetime','0');
	s.addVariable('shuffle','false');
	s.addVariable('enablejs','true');
	s.addVariable('javascriptid','mpl');
	s.addVariable('linktarget','_blank');
	s.addVariable('shuffle','false');
	s.write('player');
};
</script>
</head>
<body onload="init()">
<form id="theForm" name="theForm">
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.bliptv_most_popular1.php" onClick="storecookie(getRadioIndex()); reload();"> <a href="javascript:click(0); storecookie(getRadioIndex()); reload();">Text 1</a>
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.googlevideo_top_100.1.php" onClick="storecookie(getRadioIndex()); reload();"> <a href="javascript:click(1); storecookie(getRadioIndex()); reload();">Text 2</a>
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.dailymotion.1.php" onClick="storecookie(getRadioIndex()); reload();"> <a href="javascript:click(2); storecookie(getRadioIndex()); reload();">Text 3</a>
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.reuters_top_news1.php" onClick="storecookie(getRadioIndex()); reload();"> <a href="javascript:click(3); storecookie(getRadioIndex()); reload();">Text 4</a>
<input type="radio" name="tvchannel" value="http://michaelcbrook.com/cgi/tv.archive.org_most_recent1.php" onClick="storecookie(getRadioIndex()); reload();"> <a href="javascript:click(4); storecookie(getRadioIndex()); reload();">Text 5</a>
</form>
<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</div>
</body>

That was probably the most difficult code I have ever tried to fix, but I hope people can benefit from it. Thanks for all the help :)

Posted: Fri, 2007-06-15 23:22 Will

Great job Michael!

:) radiocookies for you :)

Posted: Wed, 2007-06-20 09:40 eks

Hi everybody,

Could you please help me form a page where I can also let the text change as the video changes. It would be great if someone could help me...
(images and urls are broken..ignore that)

Thanks so much!
Eks

in the below code:

<head><script>// <!--

function writeVideoCode(url) {

var videocode = '<iframe id=video src="'
+ url +
'" height="307" width="400" frameborder="0" scrolling="no"></iframe>';

document.getElementById("videospace").innerHTML = videocode;
}
//--></script></head>

<p class="title"><b>View all Videos</b></p>

<tr>
<td><a href="javascript:writeVideoCode('');"><img src="video_1_2.gif" /></a> </td>
<td width="10"> </td>
<td valign="top">
<p>View this video to see what Bob talks about .... in the event</td>
</tr>

<tr>
<td><a href="javascript:writeVideoCode('');"><img src="video.gif" /></a> </td>
<td width="10"> </td>
<td valign="top">
<p>In this video, Michael talks....</p>
</td>
</tr>

<tr>
<td><a href="javascript:writeVideoCode('');"><img src="/video.gif" /></a> </td>
<td width="10"> </td>
<td valign="top">
<p>View this video to see what Bob talks about .... in the event</p>
</td>
</tr>
</tbody>
</table>

Posted: Wed, 2007-06-20 10:20 andersen

@eks
please see the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/panorama.htm]panorama[/url] demo on this [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]demo page[/url]

instead of the panorama iframe src pages, substitute with your own html -
set the displayheight of the player and youre basicly there...

Posted: Thu, 2007-06-21 20:32 Dbruyere

I have been trying to make this work and althought the correct videos are played on each playlist, the playlists are invisible. Any thoughts? My code is below. I also would like to know how I might change the dropdown selection to just use links or buttons for each list. Thank you!

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="FlashControl" Namespace="Bewise.Web.UI.WebControls" TagPrefix="Bewise" %>
<%@ Register Assembly="Anthem" Namespace="Anthem" TagPrefix="anthem" %>

function storecookie(arg) {
var expiration = new Date((new Date()).getTime() + 31536000000);
var cookie = cookiename + '=' + arg;
cookie += '; expires=' + expiration.toGMTString();

document.cookie = cookie;
}

function loadcookie() {
var allcookies = document.cookie;
if (allcookies == "") return false;

var start = allcookies.indexOf(cookiename + '=');
if (start == -1) return false;

start += cookiename.length + 1;

var end = allcookies.indexOf(';', start);
if (end == -1) end = allcookies.length;

var cookie = allcookies.substring(start, end);
return cookie;
}

function killcookie() {
if (confirm("Do you really want to clear the cookie?")) {
var cookie;
cookie = cookiename + '=';
cookie += '; expires=Fri, 02-Jan-1970 00:00:00 GMT';
document.cookie = cookie;
}
}

function init() {
document.theForm.sel1.selectedIndex=loadcookie();
createPlayer(document.theForm.sel1.value);
}

function createPlayer(theFile) {
var s = new SWFObject("mediaplayer.swf","thePlayerId","700","300","7");
s.addParam("allowfullscreen","true");
s.addVariable("file",theFile);
s.addVariable("width","400");
s.addVariable("height","300");
s.addVariable("displayheight","300");
s.addVariable("overstretch","fit");
s.addVariable('frontcolor','0x005332');
s.addVariable('lightcolor','0x3AB6A5');
s.addVariable("autostart","true");
s.addVariable("thumbsinplaylist","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","thePlayerId");
s.write("playerPlaceHolder");
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="../Themes/Default/Style/common.css" rel="stylesheet" type="text/css" />
<title>TeenFazeTV</title>
</head>
<body bgcolor="#019ec7" style="padding: 5px;">
<form id="theFormId" name="theForm" runat="server">
<div>
<div class="PlayerRoundTop">
<div class="r1">
</div>
<div class="r2">
</div>
<div class="r3">
</div>
<div class="r4">
</div>
</div>
<div class="PlayerInnerArea">
<div visible="false" style="visibility: hidden;">
<input visible="false" type="button" value="Show Cookie" onclick="JavaScript: alert('Cookie value: '+loadcookie())" />
<input visible="false" type="button" value="Clear Cookie" onclick="killcookie()" /></div>
<select name="sel1" onchange="javascript: storecookie(this.selectedIndex); createPlayer(this.options[this.selectedIndex].value)"
style="width: 300px">
<option value="musicScene.xml">Music Scene</option>
<option value="fabFashion.xml">Fab Fashion</option>
<option value="adviceLounge.xml">Advice Lounge</option>
<option value="movieBuzz.xml">Movie Buzz</option>
</select>
<div id="playerPlaceHolder" runat="server">
</div>
</div>
<div class="PlayerRoundBottom">
<div class="r1">
</div>
<div class="r2">
</div>
<div class="r3">
</div>
<div class="r4">
</div>
</div>
</div>
</form>
</body>
</html>

Posted: Fri, 2007-06-22 02:18 andersen

@Dbruyere
you just neeed to set displayheight to a value that is less than the height.
the playlist height is equal to the difference: height-displayheight=playlist height

Posted: Fri, 2007-06-22 13:49 Dbruyere

Thank you anderson, but I am using my playlist out to the right of the player. So I think that I need something different?

Posted: Fri, 2007-06-22 14:19 Will

Try this:

function createPlayer(theFile) {
var s = new SWFObject("mediaplayer.swf","thePlayerId","700","300","7");
s.addParam("allowfullscreen","true");
s.addVariable("file",theFile);
s.addVariable("width",<strong>"700"</strong>);
s.addVariable("height","300");
<strong>s.addVariable('displaywidth', '400');</strong>
s.addVariable("displayheight","300");
s.addVariable("overstretch","fit");
s.addVariable('frontcolor','0x005332'); 
s.addVariable('lightcolor','0x3AB6A5'); 
s.addVariable("autostart","true");
s.addVariable("thumbsinplaylist","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","thePlayerId"); 
s.write("playerPlaceHolder");
}

If you want a control bar at the bottom of the player change 'height' to 320.

var s = new SWFObject("mediaplayer.swf","thePlayerId","700",<strong>"320"</strong>,"7");
and
s.addVariable("height",<strong>"320"</strong>);

Posted: Fri, 2007-06-22 17:58 Dbruyere

That did it. Thank you very very much.

Any thoughts on using buttons or links instead of a drop down?

Posted: Fri, 2007-06-22 20:43 Dbruyere

Nevermind. I got it. Thanks for all your help!

Posted: Thu, 2008-12-25 13:56 dfgdfgfgdfgdfg

dgdhdf

Posted: Thu, 2008-12-25 18:15 andersen

dont know why this thead got bumped into view -

please note the above codes are all for the "old" v.3.x players using swfobject v.1.5

Posted: Tue, 2009-02-17 22:17 Wordcutter

Hello.. I have a great running group of playlists, no problem. The rub comes when I try to use send to a friend email. It emails the page with the player and the playlist, Not the video showing. How do I break out the video so that it only sends the video that is playing from the playlist at the time? Below is the code, and I have looked for days on the forums here and the entire net and can find nothing to help..
-------------start----------
<html>


<head>
<title>MQM-Television, Bad Mommy</title>
<script type="text/javascript" src="stmenu.js"></script>
<script type="text/javascript" src="jw/embed/swfobject.js"></script>
<script type="text/javascript">

function createplayer(theFile, go) {
var s = new SWFObject("jw/embed/player.swf","PlayerID","650","350","9");
s.addParam('allowscriptaccess', 'always');
s.addParam('allownetworking', 'all');
s.addParam('allowfullscreen', 'true');
s.addParam('wmode', 'opaque');
s.addVariable('file', theFile);
s.addVariable('playlistsize', '200');
s.addVariable('volume', '80');

s.addVariable('logo', 'smlogo.gif');
s.addVariable('playlist', 'over');
s.addVariable('autostart', 'false');
s.addVariable('fullscreen', 'true');

s.addVariable('repeat', 'false');

s.addVariable('backcolor', '000000');
s.addVariable('frontcolor', '666666');
s.addVariable('lightcolor', '0099cc');
s.addVariable('channel', '7074');

var embedCode = escape('<embed src="http://jw/embed/player-viral.swf" width="470" height="320" bgcolor="000000" allowfullscreen="true" allowscriptaccess="always" flashvars="file=http://mqmtelevision.com&plugins=embed-1"></embed>');

s.addVariable('plugins', 'embed-1,ltas_beta');
s.addVariable('embed.code', embedCode);

s.write('placeholder');
}
</script>

</head>
<body onLoad="createplayer('http://content.bitsontherun.com/feeds/1GzYDgyM.rss',true);" bgcolor="black" text="white" link="white" vlink="white" alink="white">
<div align="left">
<table cellpadding="0" cellspacing="0" width="649">
<tr>
<td width="649" align="left" valign="top" height="23" colspan="2">
<div id="placeholder">
<p align="center"><a href="http://www.macromedia.com/go/getflashplayer">get the flash player</a> to see this player.</div> </td>
</tr>
<tr>
<td width="531" align="left" valign="top" height="23">
<p align="right"> </p>
</td>
<td width="118" align="left" valign="top" height="23">
<p align="right">
<script type="text/javascript">var addthis_pub="wordcutter28";</script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://mqmtelevision.com/eshare.jpg" alt="Email-Share-Bookmark" style="border:0" /></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>

</p>
</td>
</tr>
</table>
</div>
<p>
</p>
</body>
</html>
--------------------------------end------------------------------

Posted: Thu, 2009-02-19 14:31 Wordcutter

Me too.. now one wants to answer the problem because they say email function will be available soon. If they show us how to do it, we wont need their solution. I am working on a parser and msql/php work around for this, but it requires you to use a menu and not the playlist function provided by jw....

Using Javascript to Change Feeds

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company