I have a link on the webpage that I want the user to click so they can see one of the items in the playlist - is this possible? If so, is it difficult? Looking forward to the answer.
Bones

I have a link on the webpage that I want the user to click so they can see one of the items in the playlist - is this possible? If so, is it difficult? Looking forward to the answer.
Bones

I am not sure what full player means, but I posted the code below. Right now, it is not working with the new information you gave me. The HIGHLIGHT on the playlist does not change when I click the item and hence the video does not change to the right one. I have tried a host of different numbers and the result is the same.
Here is the code from the player if that is what you are asking for :
Also, thank you so much for the quick response!
<a href="#" onclick="javascript:sendEvent('playitem', 0); return false;"><img alt="" src="images/read_but.gif" /></a>
<div align="left"><script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject('mediaplayer.swf', 'mpl', '525', '300', '8');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'flvvideos/playlist_stumblevision.xml');
so.addVariable('width', '525');
so.addVariable('height', '300');
so.addVariable('displaywidth', '370');
so.addVariable('backcolor', '0x30312d');
so.addVariable('frontcolor', '0xcfcfcf');
so.addVariable('bufferlength', '5');
so.addVariable('overstretch', 'fit');
so.addVariable('autoscroll', 'true');
so.addVariable('thumbsinplaylist', 'true');
so.addVariable('autostart', 'true');
so.addVariable('shuffle', 'false');
so.addVariable('javascriptid','jstest');
so.addVariable('enablejs','true');
so.write('player');
</script>

I just thought of something - do I need to change something in the track list?

Means full player code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
<head>
<title>Basic JavaScript Play Item</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function sendEvent(typ, prm)
{
thisMovie('mpl').sendEvent(typ, prm);
};
function thisMovie(movieName)
{
if(navigator.appName.indexOf('Microsoft') != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
};
</script>
<script type="text/javascript">
function createPlayer()
{
var so = new SWFObject('mediaplayer.swf', 'mpl', '525', '300', '8');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'flvvideos/playlist_stumblevision.xml');
so.addVariable('width', '525');
so.addVariable('height', '300');
so.addVariable('displaywidth', '370');
so.addVariable('backcolor', '0x30312d');
so.addVariable('frontcolor', '0xcfcfcf');
so.addVariable('bufferlength', '5');
so.addVariable('overstretch', 'fit');
so.addVariable('autoscroll', 'true');
so.addVariable('thumbsinplaylist', 'true');
so.addVariable('autostart', 'true');
so.addVariable('shuffle', 'false');
so.addVariable('javascriptid', 'mpl');
so.addVariable('enablejs', 'true');
so.write('player');
};
</script>
<head>
<body onload="createPlayer();">
<div id="player" align="left">
<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin</a>
to see this gallery.
</div>
<a href="#" onclick="javascript:sendEvent('playitem', 3); return false;">Play Item 2</a>
<img src="image.jpg" onclick="javascript:sendEvent('playitem', 3); return false;" alt="Click to Play Item 2" />
<button onclick="javascript:sendEvent('playitem', 3); return false;">Play Item 2</button>
</body>
</html>
You don't need to change anything in the playlist. Use anchor, button, image, div, any HTML element that will accept the onclick.

Weird, I don't have that script for the player, just what I sent you - my player works fine as well, just don't have the this part:
<title>Basic JavaScript Play Item</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function sendEvent(typ, prm)
{
thisMovie('mpl').sendEvent(typ, prm);
};
function thisMovie(movieName)
{
if(navigator.appName.indexOf('Microsoft') != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
};
</script>
The only script I have from you is what I posted already.

I posted a full, functioning, tested page, including several methods (anchor, image, button) for selecting playlist items and including the bare minimum JavaScript API code.
Copy and paste whatever you need.
Study the tutorials at the top of this page if you want to gain more understanding of how this works.

Ok, I am a little confused, so I will try to clarify.
Right now, I don't have ALL the code you pasted, but my player with playlist works perfectly (except for the part of the hyperlink). Am I just lucky on that account?
Now, to get the hyperlink to work, I need to paste the addition code from above into my already existing page. You said you posted a full functioning tested page - but I wasn't sure where. I know you do provide loads of different links, but I don't think I saw the exact one you were talking about (maybe it is JAVASCRIPT INTERACTION?)
Again, thanks for all the help - I know this is your free time.

Your original code is sufficient for playing media from a playlist.
When you want to use JavaScript to control the player, you need the additional code that is the interface to the JavaScript API.
Rather than just posting snippets of code, that may be full of mistakes and typOs, and that probably wouldn't make sense to you and that you wouldn't know where to place in your page, I made, tested and posted a full, fully functional, tested page.
You should use it as a template to make your own page as it illustrates good coding practices, has the needed code, and has several examples of ways to create the link to play a particular item on the playlist.
If you get stuck post back here, full player code again, and we'll help you out.

Ajax,
Thanks again, but I am still not sure of the link for the fully tested page - is it in the first reply you sent me?
This one?
http://www.jeroenwijering.com/?item=Javascript_interaction

The fully tested page is the code that I posted above. If you want to see it runing on my server, click here [url=http://willswonders.myip.org:8085/php/Bones Flowers.html]Bones Flowers[/url]
The JAVASCRIPT INTERACTION is one of Jeroen's tutorials that you can access at the top of this page.

Ok, going to try it. Also you have TWO <head> opening tags, but not a closing one - does that matter?

OOPS! Change the second one to a closing tag.

Ok, I have tried this out - using your code - and it still does not change when I click on the Play 2 or the image for Play 2. I will show you the code, but it is pretty much the same as yours. I am guessing I need to change something in the last part where it references from the onclick - and Play Item 2 - was there a change that needed to go in there?
I have four items in the playlist and when I click on the Play Item two, the video continues to play and does not switch to item two (or item one because you start at zero). Sorry for not getting this...

Here is what I have done with the last part, trying to get it to work :
<img src="image.jpg" onclick="javascript:sendEvent('playitem', 3); return false;" alt="Click to Play Item 2" />
<img src="image.jpg" onclick="javascript:sendEvent('playitem', 2); return false;" alt="Click to Play Item 1" />
<img src="image.jpg" onclick="javascript:sendEvent('playitem', 1); return false;" alt="Click to Play Item 0" />
<button onclick="javascript:sendEvent('playitem', 3); return false;">Play Item 2</button>
<button onclick="javascript:sendEvent('playitem', 2); return false;">Play Item 1</button>
<button onclick="javascript:sendEvent('playitem', 1); return false;">Play Item 0</button>

Post your full page code, from the opening html tag to the closing html tag, and I'll have a look at it.

Also, the script here :
http://willswonders.myip.org:8085/php/Bones Flowers.html
Doesn't seem to work for me - it just keeps scrolling through the listing and when pressing PLAY ITEM 2, it doesn't do anything - both in firefox and IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic JavaScript Play Item</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function sendEvent(typ, prm)
{
thisMovie('mpl').sendEvent(typ, prm);
};
function thisMovie(movieName)
{
if(navigator.appName.indexOf('Microsoft') != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
};
</script>
<script type="text/javascript">
function createPlayer()
{
var so = new SWFObject('mediaplayer.swf', 'mpl', '525', '300', '8');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'playlist.xml');
so.addVariable('width', '525');
so.addVariable('height', '300');
so.addVariable('displaywidth', '370');
so.addVariable('backcolor', '0x30312d');
so.addVariable('frontcolor', '0xcfcfcf');
so.addVariable('bufferlength', '5');
so.addVariable('overstretch', 'fit');
so.addVariable('autoscroll', 'true');
so.addVariable('thumbsinplaylist', 'true');
so.addVariable('autostart', 'true');
so.addVariable('shuffle', 'false');
so.addVariable('javascriptid', 'mpl');
so.addVariable('enablejs', 'true');
so.write('player');
};
</script>
</head>
<body onload="createPlayer();">
<div id="player" align="left">
<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin</a>
to see this gallery.
</div>
<a href="#" onclick="javascript:sendEvent('playitem', 3); return false;">Play Item 4</a>
<a href="#" onclick="javascript:sendEvent('playitem', 2); return false;">Play Item 3</a>
<a href="#" onclick="javascript:sendEvent('playitem', 1); return false;">Play Item 2</a>
<a href="#" onclick="javascript:sendEvent('playitem', 0); return false;">Play Item 1</a>
</body>
</html>

Well, your code is perfectly good. By any chance, are you trying to run this offline? Browser security restrictions prevent the JavaScript API from functioning off line.
For Internet Explorer, you can put the MOTW (See: http://msdn2.microsoft.com/en-us/library/ms537628(VS.85).aspx) immediately after the opening html tag. This allows JavaScript to have local file access
Like this:
<html lang="en">
<!-- saved from url=(0014)about:internet -->.

Ok, I guess I will have to upload to try. I will let you know.

Ok, looks good. I am just going to work on the annotation next. I have to create a different body tag because mine originally said this :
<body id="page1">
and I changed it to this :
<body id="page1" onload="createPlayer();">
Is that ok?

Yeah, your body tag is OK. Let's hear how it is going, or post a link to your test page.

Thanks for your support, you are really awesome. Just trying to get annotation done. I have the stuff in the playlist, but I am going to have to look through the material again to see how it is done. The link for the old annotation demo doesn't seem to work anymore :

What kind of annotation demo and/or code do you want? (I have many!)
What do you want displayed?
Where do you want it displayed?
Over, under, on top of the player?
When do you want it displayed?
When a new track starts?

I want a simple description and name of the video underneath the Video in the HTML portion of the webpage. I think that makes sense.

OK
First you need some CSS to position the Title and the Description. Adjust to suit your page.
<style type="text/css">
div.title
{
position: absolute;
top: 560px;
left: 150px;
font-style: normal;
font-variant: normal;
font-weight: 900;
font-size: 1em;
font-family: arial, "arial unicode ms";
color: #000000;
} div.description
{
position: absolute;
top: 660px;
left: 150px;
font-style: normal;
font-variant: normal;
font-weight: 900;
font-size: 1em;
font-family: arial, "arial unicode ms";
color: #000000;
}
</style>
A couple of divs to hold the Title and the Description.
<div id="title" class="title">
</div>
<div id="description" class="description">
</div>And the JavaScript to retrieve and display the Title and the Description.
<script type="text/javascript" charset="utf-8">
var currentItem; function getUpdate(typ, pr1, pr2, pid)
{
if(typ == 'item')
{
currentItem = pr1;
setTimeout('getItemData(currentItem)', 100);
}
};
function getItemData(idx)
{
var obj = thisMovie('mpl').itemData(idx);
document.getElementById('title').innerHTML = obj['title'];
document.getElementById('description').innerHTML = obj['description'];
};
function thisMovie(movieName)
{
if(navigator.appName.indexOf('Microsoft') != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
};
</script>
Be sure that you update 'mpl' to whatever javascriptid you are using for your player.

Where are they getting the title and description from - the playlist?
Also, does it matter where the Javascript goes in the webpage? At the top?
Lastly, what does mpl mean? Is that the playlist or something else like the mediaplayer?

The title comes from the title element of the playlist.
The description comes from the annotation element of the playlist.
The JavaScript goes in the head element of your HTML document.
mpl is the id/name/javascriptid of the player. It is written to the object/embed elements when the player is created and used to refer to that particular player when using the JavaScript API.

var so = new SWFObject('mediaplayer.swf', 'mpl', '525', '300', '8');
Is this what you are referring to? I am sorry, I am not getting it and this sucks because I am so close to finishing! I see the "mpl", and so I am guessing that is the mediaplayer acronym. But I am unable to see where it NAMED the mediaplayer something else. I am looking in the code, maybe I should be looking at the windows explorer and my files?

From: http://blog.deconcept.com/swfobject/
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);
So you see the second parameter is the player's id. This is the name of the player, just like your name is "Bones'. so when I want to talk to the player, I use 'mpl', when I want to talk to you, I use 'Bones'.
In the JavaScript code, when we want to get a reference to the Movie (the JW FLV Media Player - mediaplayer.swf), we use: thisMovie('mpl') referring to the mediaplayer by it's name/id/javascriptid of 'mpl'.

Ok, is there a way of putting in the description that isn't CSS? By using regular html or do I have to go that route? I am having a difficult time getting it lined up properly...

You can delete or comment out the CSS.
Then use HTML to position the HTML elements with ids of "title" and "description".
I find it much easier to use CSS. If you would like some help with the CSS, post your HTML page or a link to your test page and I'll give you some pointers, or do it with HTML if you want to go that route.

I am getting it, slowly but surely. I will probably post the entire page when I am done everything. Right now, the video TIME or length of the video is always showing 20secs even though the video is 5 minutes - trying to figure that out. Also the annotation - is it supposed to look like this :
<annotation>
<B>Project name:</B> ( <font style="color:#E82602"> Orbs</font> ) <BR>
<B>Product:</B> (<font style="color:#E82602"> flv video </font> ) <BR>
<B>Length:</B> (<font style="color:#E82602"> 0:20 </font> ) <BR>
</annotation>
I just don't understand the symbols and such in the annotation and what they are there for, maybe I am not supposed to understand...

Weird, when I pasted the annotation - it turns out different?!?! It look really different before I pasted it!

Now the annotation doesn't seem to work anymore... jeepers creepers on this one. More testing on the way...

@Bones - you can not use unencoded html tags directly in the <annotation> tag !
you must use a <![CDATA[...]]> tag and also encode < and > as < and > to format the html on the page...
please see the source of the example http://home5.inet.tele.dk/nyboe/flash/mediaplayer/annotationdisplayimage.htm
and the playlist: http://home5.inet.tele.dk/nyboe/flash/mediaplayer/playlist_mixmedia_annotation_image.xml
demopage: http://home5.inet.tele.dk/nyboe/flash/mediaplayer

Ok, I am going to try. I was wondering because other examples I have seen have just used :
<annotation>Title</annotation>
Will this work also or not?

I also notice that when I upload a change in the javascript, that it doesn't refresh for a long time - I end up looking at no changes in both Fox and IE because it seems the js or something else is causing an abnormal amount of time to kick in the new changes - anyone else? How about the <annotation> my video </annotation> ? This is probably part of the issue why I am still asking questions because I can't get an update from my server or the site to show the changes...

Ok, I finally got it working. I just used the TITLE instead of the annotation.

Hey it works ! Wait, no, it worked.. The (wonderful, BTW, thanks a lot) AJAX code stopped working when using the new player.swf... Has the "so.addParam" syntax changed between the 3.8 and the >4 versions ? In short, what can I do to make *exactly this code* (the AJAX example, see above) work with the new current player.swf ?
Thanks a lot to all of you guys, this mediaplaying system is really neat.

@xaccrocheur,
Rather than give you some v4.x code that might not fit your needs, post your current code and I'll convert it to swfobject v2.1 and the player v4.2x code.

werwrwrw

Most the examples I see here on this site are for controlling the video playlist that is on the same page.
I'm trying to link some thumbnail on my homepage to the corresponding video within a playlist on ANOTHER page. Can someone point me to a tutorial please?
Regards,
Mike

Search for "swfobject.getQueryParamValue".
You will find examples like this that show how to call another page that has a player and playlist and pass a query parameter that can be a file, a playlist, an index, a seek time, etc.

Harking back to the original question in this thread, I'm trying to simply link to a playlist item. I seem to have everything working except the links, and I can't seem to track down exactly what the problem is. Any help would certainly be appreciated! :)
Here is my full code (hopefully this posts properly):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" >
<script type="text/javascript" src="mediaplayer/swfobject.js"></script>
<script type="text/javascript">
function sendEvent(typ, prm)
{
thisMovie('mpl').sendEvent(typ, prm);
};
function thisMovie(movieName)
{
if(navigator.appName.indexOf('Microsoft') != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
};
</script>
<script type="text/javascript">
function createPlayer()
{
var so = new SWFObject('mediaplayer/player.swf', 'mpl', '400', '244', '8');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'mediaplayer/playlist.xml');
so.addVariable('width', '400');
so.addVariable('height', '244');
so.addVariable('displaywidth', '370');
so.addVariable('backcolor', '0x333333');
so.addVariable('frontcolor', '0xcfcfcf');
so.addVariable('bufferlength', '5');
so.addVariable('overstretch', 'fit');
so.addVariable('autoscroll', 'true');
so.addVariable('thumbsinplaylist', 'true');
so.addVariable('autostart', 'true');
so.addVariable('shuffle', 'false');
so.addVariable('javascriptid', 'mpl');
so.addVariable('enablejs', 'true');
so.write('player');
};
</script>
</head>
<body onload="createPlayer();">
<?php include('header.php'); ?>
<div id="hdrImg"><img src="graphics/hdr-forms.jpg"></div>
<div id="content">
<h1> Meet Dr. Pittaluga </h1>
<p>In the following videos, Dr. Juan Pittaluga introduces himself, discusses his practice, and explains the importance of patient comfort as well as what he and his staff do to ensure patients are comfortable, informed and involved in the diagnosis and treatment of their health issues.</p>
<div class="vid">
<div class="videoMenu">
<h6>Select a video:</h6>
<ul>
<li><a href="#" onclick="javascript:sendEvent('playitem', 0); return false;">Meet Dr. Pittaluga</a></li>
<li><a href="#" onclick="javascript:sendEvent('playitem', 1); return false;">Open Access Communication</a></li>
<li><a href="#" onclick="javascript:sendEvent('playitem', 2); return false;">Advanced Nuclear Imaging</a></li>
<li><a href="#" onclick="javascript:sendEvent('playitem', 3); return false;">Interactive Website</a></li>
</ul>
</div>
<div class="video">
<div id="player">
<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin</a>
to see this gallery.
</div>
</div>
</div>
<div class="clear"></div>
</div>
<?php include('footer.php'); ?>
</body>
</html>
Page can be found here: http://www.s281283534.onlinehome.us/video.php
TIA!

You are trying to use v3 player JavaScript API code with a v4 player. The JavaScript API code for the v4 player is completely different.
Replace this:
<script type="text/javascript">
function sendEvent(typ, prm)
{
thisMovie('mpl').sendEvent(typ, prm);
};function thisMovie(movieName)
{
if(navigator.appName.indexOf('Microsoft') != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
};
</script>
With this:
<script type="text/javascript">
var player = null; function playerReady(obj)
{
player = document.getElementById(obj.id);
};
function loadNplay(idx)
{
player.sendEvent('ITEM', idx);
//...uncomment the next line to start the player after the player indexes to the selected track (needed for some releases)
//setTimeout("player.sendEvent('PLAY', 'true')", 100);
};
</script>
then your links should look like this:
<li><a href="#" onclick="loadNplay(0); return false;">Meet Dr. Pittaluga</a></li>Also, update your player code:
<script type="text/javascript">
function createPlayer()
{
var so = new SWFObject('mediaplayer/player.swf', 'mpl', '400', '244', '9.0.124');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'mediaplayer/playlist.xml');
so.addVariable('playlist', 'right');
so.addVariable('playlistsize', '30');
so.addVariable('backcolor', '333333');
so.addVariable('frontcolor', 'CFCFCF');
so.addVariable('bufferlength', '5');
so.addVariable('stretching', 'exactfit');
so.addVariable('autostart', 'true');
so.addVariable('shuffle', 'false');
so.write('player');
};
</script>
Hey, thanks lost. My suspicion was that I was working with old code on a newer player, but after an hour and a half of searching I had run out of places to look, and I'm no Flash expert!
Works perfectly now, and will probably become a regular solution for us. Thanks again for your help, and the quick reply!. :thumbup:


I tried both versions of the code provided here:
http://www.rpmvm.com/dev/buttons/index2.html
and
http://www.rpmvm.com/dev/buttons/index_v2.html
Please let me know if there is something that I have done -code-wise or version-wise that does not check out, I have been at this for a couple of days so any help would be greatly appreciated.

index2.html is using JavaScript code for the v3 player JavaScript API with a v4 player. Won't ever work.
index_v2.html works fine for me — your playlist needs to be wider, but everything works correctly.
You can see some cleaned up & functioning code on my test page here: http://willswonders.myip.org:8074/index_v2.html

ok are you saying my index_v2.html actually works on your machine?
you are also referencing my player -so my player player version is ok too.
I will try your cleaned up version.
will this work without displaying the vertical playlist?

Yes, index_v2.html from your server works for me.
Your player and playlist are also OK.
By the "vertical playlist", are you referring to the playlist on the right side of the player? Yes, the player will work without any playlist display at all. Set the playlist flashvar to none and delete the playlistsize flashvar.

cool, this is wierd but as I use your code exactly the way you have it -it now works in firefox and safari but not in explorer on my end.
Any way around that?

Your code from: http://www.rpmvm.com/dev/buttons/index_v2.html works fine for me in Internet Explorer, so you have a local problem, possibly a corrupted Adobe Flash Player in IE. Unintall it with Adobe's uninstaller, then re-install from Adobe.
You need the basic JavaScript API interface code including the sendEvent() function.
More info here: [url=http://www.jeroenwijering.com/?item=Javascript_interaction]JAVASCRIPT INTERACTION[/url]
Then use a link like this:
<a href="#" onclick="javascript:sendEvent('playitem', 3); return false;">Play Item 2</a>Notice that the playlist item count starts with zero.If you get stuck, post your full player here and we'll help you further.