Hello, Im trying to use this setup of the flv player.
http://www.longtailvideo.com/support/jw-player-setup-wizard?example=16
And I was wondering is there anyway I can put the thumbnails to the right instead of the left. As you can see in the example the thumbnails are pushed up against the video with no border, I would like to put the thumbnails on the right, to separare the video from the thumbnails. Thanks for any help in advance
Thanks Andersen for your help, It works now.
How to use Andersens examples above if you have the link to the playlist hardcoded in the players swf file? I'm doing this because I want to hide the link to the playlist.
@Bob - it should make no difference for the above scripts that the player has the playlist address hardcoded - try !
but why would you want to do that ?
if it is to prevent "leeching" it wont help at all - that must be done on the server.
if it is to prevent users copying your files - it wont help either, as the files will be in the browser cache after playing, unless you use true streaming - which again is a serverside issue...
and even with true streaming, the user just need to use a stream recorder to copy the files...
as the internet was designed with the ease of distribution and access of files in mind - the basic functionalities of linking and copying are quite difficult to undo...
for managable solutions you might want to check JeroenWs - http://www.bitsontherun.com/
I just want to hide some rtmp links in the playlist, not to prevent downloading so thats why i'm hardcoding it.
Well I tried to use the custom playlist script but with no luck. The playlist won't load. Here's the changes I did in the script. I removed all that had with the file to do.
function createPlayer(theAutostart) {
var flashvars = {
autostart:theAutostart,
stretching:"exactfit",
subscribe:"true"
}
function init() {
Drag.init(document.getElementById("playerhandle"), document.getElementById("playerroot"));
Drag.init(document.getElementById("listhandle"), document.getElementById("listroot"));
document.getElementById("playerhandle").style.cursor = 'move';
document.getElementById("listhandle").style.cursor = 'move';
createPlayer(false);
}
you are probably attempting too many things at once - you need to go about it in a systematic manner to get a fair chance of getting to know where the problem arises...
note that the script in question does not load a playlist - the player does, and then exports it to the script...
you didnt mention at first that you want to use rtmp, but that is probably where the problem resides...
first set up a regular, unmodified player with a playlist to make sure the streaming works -
then try your modified player in the same way - still without using the external playlist script...
then try an unmodified player and the external playlist to see that work too...
then when all the above works, apply the playlist exporting/rendering script to your modified player...
but first of all, please review the flashvars and fileformats/playlists pages:
http://developer.longtailvideo.com/trac/wiki/FlashFormats
http://developer.longtailvideo.com/trac/wiki/FlashVars
in particular note:
streamer (undefined): location of a server to use for streaming. Can be an RTMP application (here's an example - http://www.jeroenwijering.com/?page=wizard&example=4 ) or external PHP/ASP file to use for HTTP streaming. - http://www.jeroenwijering.com/?item=HTTP_Video_Streaming - If set to lighttpd - http://lighttpd.net/ - the player presumes a Lighttpd server is used to stream videos.
What I've tested so far is to set up the script with my own playlist and streamer set in the flashvars which went just fine with player 4.2.90. So rtmp streaming works. What I've done then is to hardcode both the streamer and the playlist in the player AS and then use the script as I wrote above with my customized player. The player renders but the playlist don't. If I just can get the hardcoded playlist to render all probably will work.
I would like to take disable the scroll and the descriptions so I can just have the buttons displayed.
can you show me how to set that up -I appreciate it!
I also edited the xml playlist for my vids but the buttons stopped working
Is it hardcoded somewhere so that I can link then to my vids?
Hello Andersen
I have this playlist problem that is driving me nuts here...
I'm trying to create a floating playlist like you did in the following example....
http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/custom_playlist_advanced.html
However I'm not successful, that setup doesn't work on my server for some reason. The only way I have got the player to work is like this.
https://posturalterapi.se/therapist/mikaelholmberg/clients/english/test/jwplayertest.html
... I would like the floating playlist to appear where it says 1. Playlist here... (just text no picture or frame, I will put a png-cover on top of it so people can't drag it around)
Here's the code..
<HTML>
<HEAD>
<TITLE>JW-PLAYER TEST</TITLE>
<!-- ******************** Show/Hide ************************************* -->
<script type="text/javascript" language="JavaScript">
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>
<!-- ******************** player
***************************************************************************************************************
* -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="dom-drag.js"></script>
<script type="text/javascript">
var blipurl = 'http://blip.tv/?1=1&s=posts&skin=rss';
var currentPlaylist = null;
var currentLength = 0;
var currentItem = -1;
var previousItem = -1;
var currentMute = false;
var currentVolume = 80;
var currentPosition = 0;
var currentState = 'NONE';
var currentLoaded = 0;
var currentRemain = 0;
var player = null;
function playerReady(thePlayer) {
player = window.document[thePlayer.id];
addListeners();
}
function addListeners() {
if (player) {
player.addControllerListener("ITEM", "itemListener");
player.addControllerListener("MUTE", "muteListener");
player.addModelListener("LOADED", "loadedListener");
player.addModelListener("STATE", "stateListener");
player.addModelListener("TIME", "positionListener");
player.addViewListener("VOLUME", "volumeListener");
} else {
setTimeout("addListeners()",100);
}
}
function stateListener(obj) { //IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
currentState = obj.newstate;
previousState = obj.oldstate;
var tmp = document.getElementById("stat");
if (tmp) {
tmp.innerHTML = "current state: " + currentState +
"<br>previous state: " + previousState;
}
}
function positionListener(obj) {
currentPosition = obj.position;
var tmp = document.getElementById("tim");
if (tmp) { tmp.innerHTML = "position: " + currentPosition; }
}
function loadedListener(obj) {
currentLoaded = obj.loaded;
currentRemain = obj.total - currentLoaded;
var tmp = document.getElementById("ldd");
if (tmp) {
tmp.innerHTML = "bytes loaded: " + currentLoaded +
"<br>bytes remaining: " + currentRemain;
}
}
function volumeListener(obj) {
currentVolume = obj.percentage;
var tmp = document.getElementById("vol");
if (tmp) { tmp.innerHTML = "volume: " + currentVolume; }
}
function muteListener(obj) {
currentMute = obj.state;
var tmp = document.getElementById("mut");
if (tmp) { tmp.innerHTML = "mute: " + currentMute; }
}
function itemListener(obj) {
if (obj.index != currentItem) {
previousItem = currentItem;
currentItem = obj.index;
if (previousItem == -1) { getPlaylistData(); }
var tmp = document.getElementById("itm");
if (tmp) {
tmp.innerHTML = "current item: " + currentItem +
"<br>previous item: " + previousItem;
}
var tmp = document.getElementById("item");
if (tmp) { tmp.innerHTML = "item: " + currentItem; }
var tmp = document.getElementById("pid");
if (tmp) {
tmp.innerHTML = "(received from the player with the id: <i><b>" + obj.id + "</b></i>)";
}
printItemData(currentItem);
}
}
function printItemData(theIndex) {
var plst = null;
plst = player.getPlaylist();
if (plst) {
var txt = '';
txt += '<li><b>item number: </b>' + theIndex + ':</li>';
txt += '<li><b>title: </b>' + plst[theIndex].title + '</li>';
txt += '<li><b>author: </b>' + plst[theIndex].author + '</li>';
txt += '<li><b>file: </b>' + plst[theIndex].file + '</li>';
txt += '<li><b>image: </b>' + plst[theIndex].image + '</li>';
txt += '<li><b>link: </b><a href="' + plst[theIndex].link + '">' + plst[theIndex].link +
'</a></li>';
//txt += '<li><b>description: </b>' + plst[theIndex].description + '</li>';
var tmp = document.getElementById("itmsDat");
if (tmp) { tmp.innerHTML = txt; }
}
}
function getPlaylistData() {
var plst = null;
plst = player.getPlaylist();
if (plst) {
currentPlaylist = plst;
var txt = '';
for(var i in currentPlaylist) {
txt += '<input type="checkbox" id="cb' + i + '" checked="checked" /> ';
txt += currentPlaylist[i].title;
txt += '<br />';
}
var tmp = document.getElementById("plstDat");
if (tmp) { tmp.innerHTML = txt; }
}
}
function loadCheckedPlaylistData() {
if (currentPlaylist) {
var j = 0;
var lst = new Array();
for(var i in currentPlaylist) {
if(document.getElementById('cb' + i).checked) {
lst[j] = {
author:currentPlaylist[i].author,
description:currentPlaylist[i].description,
duration:currentPlaylist[i].duration,
file:currentPlaylist[i].file,
link:currentPlaylist[i].link,
image:currentPlaylist[i].image,
start:currentPlaylist[i].start,
title:currentPlaylist[i].title,
type:currentPlaylist[i].type
}
j++;
}
}
if(lst.length > 0) { player.sendEvent('LOAD', lst); }
}
}
function getLength() { currentLength = player.getPlaylist().length; return(currentLength); };
function loadFile(theFile) { currentItem = -1; previousItem = -1; player.sendEvent('LOAD', theFile); };
/* one playlist item
lst[n] = {
author:"",
description:"",
duration:"",
file:"",
link:"",
image:"",
start:"",
title:"",
type:""
}
*/
<!-- ******************** playlist 1 ******************************** -->
var lst = new Array();
lst[0] = {
author:"Greus/Holmberg",
description:"1. Sitting floor twist",
file:"https://posturalterapi.se/recordings/markus-sittingfloortwist.mp3",
image:"https://posturalterapi.se/exercise/markus-sittingfloortwist.jpg",
type:"audio"
}
lst[1] = {
author:"Greus/Holmberg",
description:"2. Footcircles",
file:"https://posturalterapi.se/recordings/markus-footcircles.mp3",
image:"https://posturalterapi.se/exercise/markus-footcircles3.jpg",
type:"audio"
}
lst[2] = {
author:"Mikael Holmberg",
description:"3. Static extension",
file:"https://posturalterapi.se/recordings/markus-staticextension.mp3",
image:"https://posturalterapi.se/exercise/markus-staticextension.jpg",
type:"audio"
}
<!-- ******************** playlist 2 ******************************** -->
var lst2 = new Array();
lst2[0] = {
author:"Greus/Holmberg",
description:"1. Sitting floor twist",
file:"https://posturalterapi.se/recordings/staticback1.mp3",
image:"https://posturalterapi.se/exercise/markus-staticextension.jpg",
type:"audio"
}
lst2[1] = {
author:"Greus/Holmberg",
description:"2. Gravity drop",
file:"https://posturalterapi.se/recordings/staticback1.mp3",
image:"https://posturalterapi.se/exercise/markus-gravitydrop.jpg",
type:"audio"
}
lst2[2] = {
author:"Mikael Holmberg",
description:"3. Static extension",
file:"https://posturalterapi.se/recordings/staticback1.mp3",
image:"https://posturalterapi.se/exercise/markus-staticback.jpg",
type:"audio"
}
</script>
</HEAD>
<Body>
<div id="jwplayer1" style="left: -8px; top: -12px; position: absolute; z-index:1; display: visible">
<object id="player1"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="swflash.cab#version=9.0.115"
width="720" height="406">
<param name=bgcolor value="#FFFFFF">
<param name=movie value="player.swf">
<param name=allowfullscreen value="true">
<param name=allowscriptaccess value="always">
<param name=wmode value="transparent">
<param name="flashvars"
value="fullscreen=true&playlist=top&playlistsize=210&shuffle=false&repeat=false&controlbar=none&autostart=false
&displayclick=none&stretching=fill&backcolor=FFFFFF&frontcolor=000000&screencolor=FFFFFF">
<embed name="player1"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="720" height="406"
bgcolor="#FFFFFF"
src="player.swf"
allowfullscreen="true"
allowscriptaccess="always"
wmode="transparent"
flashvars="fullscreen=true&playlist=top&playlistsize=210&shuffle=false&repeat=false&controlbar=none&autostart=f
alse&displayclick=none&stretching=uniform&backcolor=FFFFFF&frontcolor=000000&screencolor=FFFFFF">
/embed></object></div>
<div id="playermenu" style="left: 27px; top: 134px; position: absolute; width: 300px; height: 61px; z-index:81;
display:none">
<!-- ******************** play
***************************************************************************************************************
* -->
<div id="play" style="width: 300px; height: 61px; z-index:81; display:visible">
<div id="playbutton" style="left: 18px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="playpic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/play1b.jpg"></div>
<div id="playbutton2" style="left: 18px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="playpic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/play2b.jpg"></div>
<div id="playlink" style="left: 22px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23; display:visible">
<a id="linkplay" href="#"
onclick="player.sendEvent('PLAY');
HideContent('play');
ShowContent('pause');
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="playbutton2.style.zIndex='23'"
onMouseOut="playbutton2.style.zIndex='21'">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div></div>
<!-- ******************** pause
***************************************************************************************************************
* -->
<div id="pause" style="width: 300px; height: 61px; z-index:81; display:none">
<div id="pausebutton" style="left: 18px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="pausepic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/pause1.jpg"></div>
<div id="pausebutton2" style="left: 18px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="pausepic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/pause2.jpg"></div>
<div id="pauselink" style="left: 22px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23; display:visible">
<a id="linkpause" href="#"
onclick="player.sendEvent('PLAY');
HideContent('pause');
ShowContent('play');
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="pausebutton2.style.zIndex='23'"
onMouseOut="pausebutton2.style.zIndex='21'">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div></div>
<!-- ******************** stop
***************************************************************************************************************
* -->
<div id="stopbutton" style="left: 50px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="stoppic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/stop1b.jpg"></div>
<div id="stopbutton2" style="left: 50px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="stoppic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/stop2b.jpg"></div>
<div id="stoplink" style="left: 54px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23">
<a id="linkstop" href="#"
onclick="player.sendEvent('STOP');
HideContent('pause');
ShowContent('play');
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="HideContent('stopbutton')"
onMouseOut="ShowContent('stopbutton')">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div>
<!-- ******************** prev
***************************************************************************************************************
* -->
<div id="prevbutton" style="left: 80px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="prevpic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/prev1b.jpg"></div>
<div id="prevbutton2" style="left: 80px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="prevpic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/prev2b.jpg"></div>
<div id="prevlink" style="left: 84px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23">
<a id="linkprev" href="#"
onclick="player.sendEvent('PREV');
HideContent('play');
ShowContent('pause');
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="HideContent('prevbutton')"
onMouseOut="ShowContent('prevbutton')">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div>
<!-- ******************** next 1
***************************************************************************************************************
* -->
<div id="nextone" style="width: 300px; height: 61px; z-index:81; display:visible">
<div id="nextbutton" style="left: 110px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="nextpic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/next1b.jpg"></div>
<div id="nextbutton2" style="left: 110px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="nextpic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/next2b.jpg"></div>
<div id="nextlink" style="left: 114px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23">
<a id="linknext" href="#"
onclick="player.sendEvent('NEXT');
HideContent('play');
ShowContent('pause');
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="HideContent('nextbutton')"
onMouseOut="ShowContent('nextbutton')">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div></div>
<!-- ******************** volumeup
***************************************************************************************************************
* -->
<div id="volupbutton" style="left: 142px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="voluppic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/volup1b.jpg"></div>
<div id="volupbutton2" style="left: 142px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="voluppic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/volup2b.jpg"></div>
<div id="voluplink" style="left: 146px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23">
<a id="linkvolup" href="#"
onclick="player.sendEvent('VOLUME', currentVolume+10);
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="HideContent('volupbutton')"
onMouseOut="ShowContent('volupbutton')">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div>
<!-- ******************** volumedown
***************************************************************************************************************
* -->
<div id="voldownbutton" style="left: 173px; top: 7px; position: absolute; z-index:22; display:visible">
<img name="voldownpic" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/voldown1b.jpg"></div>
<div id="voldownbutton2" style="left: 173px; top: 7px; position: absolute; z-index:21; display:visible">
<img name="voldownpic2" border="0" width="29px" height="40px"
src="https://posturalterapi.se/images/buttons/voldown2b.jpg"></div>
<div id="voldownlink" style="left: 177px; top: 0px; position: absolute; width: 27px; height: 71px; border: 0px
solid blue; z-index:23">
<a id="linkvoldown" href="#"
onclick="player.sendEvent('VOLUME', currentVolume-10);
return false"
onFocus="if(this.blur)this.blur()"
onMouseOver="HideContent('voldownbutton')"
onMouseOut="ShowContent('voldownbutton')">
<img id="intropiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div>
</div>
<div id="launchplayer" style="left: 20px; top: 20px; position: absolute; width: 104px; height: 34px; z-index:5;
font: 10px verdana; color: #5E5E5E">Launch player</div>
<div id="launchplayerlink" style="left: 5px; top: 10px; position: absolute; width: 104px; height: 34px; z-
index:6">
<a id="videotwobak" href="#"
onclick="HideContent('launchplayer');
ShowContent('rubrik');
ShowContent('program1');
ShowContent('playermenu');
player.sendEvent('LOAD', lst);
player.sendEvent('PLAY');
HideContent('play');
ShowContent('pause');
return false"
onFocus="if(this.blur)this.blur()">
<img id="twopiclink" border="0" width="100%" height="100%"
src="https://posturalterapi.se/images/buttons/blank.png"></a></div>
<div id="rubrik" name="rubrik" style="left: 44px; top: 44px; position: absolute; z-index:5; display:none">
<img src="https://posturalterapi.se/images/headlines/rubrikprogram1.png" name="rubrik" frameborder="0"
width="236px" height="41px"></div>
<div id="program1" name="namn" style="display:none; left: 48px; top: 100px; position: absolute; z-index:5;
font: 12px verdana; color: black;
line-height: 19px;">1. Playlist here</div>
</Body>
</HTML>
Is there a way to have the playlist floating with that setup?
Best regards
Mikael
if you export the playlist you can format it with html/css without need to program a new skin
please see - http://www.longtailvideo.com/support/tutorials/Javascript-API-Examples
and find examples like
http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/custom_playlist.html
http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/custom_playlist_horizontal.html
http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/custom_playlist_advanced.html
please note that the examples uses swfobject v.2.1 - http://code.google.com/p/swfobject/