Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

JW Player
/
Using Playlists

Playlist is not loading in Custom Playlist s

55 replies [Last post]
Posted: Fri, 2008-10-31 08:10 Sam
Anonymous's picture

I have been recently trying ...I have been recently trying to create a media gallery for my website. I wanted to have a media library where I have ability to have different playlist i.e. basically links when clicked will change the playlist accordingly. Adding to this I wanted to separate the playlist from the video player (http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/custom_playlist_advanced.html I don’t need the drag option) so that I can style it and place it elsewhere. Anyway I started playing around with the file shown in the link below. Everything works fine; only thing is, for the playlist to change I need to click the links twice. Once a playlist is loaded the movies within it plays fine. But again to load another playlist I have to click twice. It would be great if someone can review the ode and let me know what am doing wrong.

<html>

<!-- page by andersen -->
<head>
<title>JW FLV Media Player with customized playlist</title>

<style type=text/css>
body { padding:0px; margin:0px; 
font-size:12px;
font-family:verdana,helvetica,arial;
background-color: #ffffff;
}

#playerroot { position:absolute; width:400px; height:268px;
border:#333 1px solid; border-bottom:0px;
background-color:#f4f4f4;
z-index:9999;
}

#listroot { position:absolute; width:400px; height:268px;
border:#333 1px solid;
background-color:#f4f4f4;
z-index:2;
}

#playerhandle { width:396px; padding:2px; margin:2px; color:white; background-color:#426300; font-weight:bold; }
#listhandle { width:396px; padding:2px; margin:2px; color:white; background-color:#426300; font-weight:bold; }

.playinglo { font:12px verdana,arial,helvetica,sans-serif; color:#000000; background-color:#c6ef74; }
.playinghi { font:12px verdana,arial,helvetica,sans-serif; color:#000000; background-color:#7bad00; vertical-align:top; text-align:left; }

.playlistlo { font:12px verdana,arial,helvetica,sans-serif; color:#000000; background-color:#7bad00; vertical-align:top; text-align:left; }
.playlisthi { font:12px verdana,arial,helvetica,sans-serif; color:#000000; background-color:#c6ef74; }
.playlistbox { width:400px; height:244px; margin:0px; border:#7bad00 1px solid; overflow:auto; }
</style>

<!--<script type="text/javascript" src="dom-drag.js"></script>-->
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
var currentItem = -1;
var previousItem = -1;
var currentLength = 0;
var currentState = 'NONE';
var previousState= 'NONE';
var linkFlag = false;

var player = null;
function playerReady(thePlayer) {
//alert(thePlayer);
player = document.getElementById(thePlayer.id);
addListeners()
printPlaylistData();
}

function addListeners() {
if (player) {
player.addControllerListener("ITEM", "itemListener");
player.addModelListener("STATE", "stateListener");
} else {
setTimeout("addListeners()",100);
}
}

function itemListener(obj) {
if (obj.index != currentItem) {
previousItem = currentItem;
currentItem = obj.index;
setItemStyle(currentItem);
//alert("sdffsdfsd");
}
}

function stateListener(obj) { //IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
currentState = obj.newstate;
//previousState = obj.oldstate;

var tmp = document.getElementById("itm" + currentItem);
if ((currentState != previousState)||(currentItem != previousItem)) { 
previousState = currentState;
setItemStyle(currentItem);
}
}

function mover(obj, idx) {
if (idx == currentItem) { obj.className = 'playinghi'; }
else  { obj.className = 'playlisthi'; }
}

function mout(obj, idx) {
linkFlag = false;
if (idx == currentItem) { obj.className = 'playinglo'; }
else  { obj.className = 'playlistlo'; }
}

function setItemStyle(idx) {
var count = getLength();
for(var i=0; i<count; i++) {
var tmp = document.getElementById("itm" + i);
if (tmp) {
if(i == idx) {
if(currentState == 'PLAYING') { tmp.className = 'playinglo'; } //'playinghi';
else { tmp.className = 'playlisthi'; } //'playinglo';
} else { tmp.className = 'playlistlo'; }
}
}
}

function getLength() { currentLength = player.getPlaylist().length; return(currentLength); };

function printPlaylistData() {
var plst = null;
//var currentPlaylist;
var tmp = document.getElementById("plstDat");
//tmp.innerHTML == "";
plst = player.getPlaylist();
//plst = player.getPlaylist();
if (plst) {
//currentPlaylist = plst;
//alert("fsdfasdfasdf");
var txt='<table cellPadding="2" width="380">';
for(var i in plst) {
txt+='<tr><td><table width="370" id="itm' + i + '" onclick="player.sendEvent(\'ITEM\',' + i + ');" ';
txt+='class="playlistlo" onmouseover="mover(this, ' + i + ')" onmouseout="mout(this, ' + i + ')">';
txt+='<tr><td><img src="' + plst[i].image + '" width="90"  height="68" title="Click to Play"></td>';
txt+='<td width="276" valign=middle><p>';
txt+=plst[i].title + '<br>';
txt+='<b>' + plst[i].author + '</b><br>';
txt+='<b>Duration ' + plst[i].duration + ' Mnts</b><br>';
txt+='<a href="' + plst[i].link + '" target="_self" title="' + plst[i].link + '"> more info</a><br>';
//txt+=plst[i].description;
txt+='</p></td></tr></table></td></tr>';
}
txt+='</table>'; //alert(txt);

if (tmp) { tmp.innerHTML = txt; }
} else {
setTimeout("printPlaylistData()",100);
}
}

function loadCheckedPlaylistData(theFileLoad) {
/*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); }
} */
//createPlayer(theFileLoad,'false');
//printPlaylistData();
player.sendEvent('STOP');
player.sendEvent('LOAD', theFileLoad);
//playerReady('player1');
printPlaylistData();
//return false;
//printPlaylistData();
}

function createPlayer(theFile, theAutostart) {
//deletePlayer("placeholder1");
//printPlaylistData(theFile);

var flashvars = {
file:theFile, 
autostart:theAutostart,
shuffle:false,
repeat:"list"
}

var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}

var attributes = {
id:"player1", 
name:"player1"
}

swfobject.embedSWF("player.swf", "placeholder1", "400", "245", "9.0.115", false, flashvars, params, attributes);

}

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('playlist3.xml', false);
}
</script>

</head>
<body onLoad="init();">

<div id="txt" style="position:absolute; left:30px; top:30px">
<a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player"> JW FLV Media Player</a><br><br>
with a customized playlist: <a href="playlist_mixmedia.xml">playlist_mixmedia.xml</a>
</div>

<div id="playerroot"  style="position:absolute; left:50px; top:110px">

<div id="playerhandle">JW FLV Media Player</div>
<div id="wrapper">
<div id="placeholder1"></div>
</div>
</div>

<div id="listroot"  style="position:absolute; left:450px; top:110px">
<div id="listhandle"> Custom Playlist</div>

<div class="playlistbox" align="left">
<div id="plstDat"></div>
</div>
</div>

<a href="javascript:loadCheckedPlaylistData('playlist.xml')">Play list 1 </a>
<a href="javascript:loadCheckedPlaylistData('playlist1.xml')">Play list 1 </a>
<a href="javascript:loadCheckedPlaylistData('playlist2.xml')">Play list 1 </a>
</body>
</html>

Posted: Fri, 2008-10-31 22:03 kLink  
Anonymous's picture

I can't find anything wrong with this code; it works perfectly for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

  <head>

    <title>JW FLV Media Player with Separate Playlist</title>

    <style type="text/css">
      body
      {
        padding:                                    0;
        margin:                                     0;
        font-size:                               12px;
        font-family:          verdana,helvetica,arial;
        background-color:                     #ffffff;
      }

      #playerroot
      {
        position:                            absolute;
        top:                                    110px;
        left:                                    50px;
        width:                                  400px;
        height:                                 265px;
        border:                        #333 1px solid;
        border-bottom:                              0;
        background-color:                     #f4f4f4;
        z-index:                                 9999;
      }

      #listroot
      {
        position:                            absolute;
        top:                                    110px;
        left:                                   456px;
        width:                                  400px;
        height:                                 265px;
        border:                        #333 1px solid;
        background-color:                     #f4f4f4;
        z-index:                                    2;
      }

      #playerhandle
      {
        width:                                  396px;
        padding:                                  2px;
        margin:                                   2px;
        color:                                  white;
        background-color:                     #426300;
        font-weight:                             bold;
      }

      #listhandle
      {
        width:                                  400px;
        padding:                                  2px;
        margin:                                   2px;
        color:                                  white;
        background-color:                     #426300;
        font-weight:                             bold;
      }

      #txt
      {
        position:                            absolute;
        left:                                    50px;
        top:                                     30px;
      }

      #links
      {
        position:                            absolute;
        top:                                     89px;
        left:                                    50px;
        padding:                                  3px;
        border:                        #333 1px solid;
        background-color:                     #f4f4f4;
      }

      #link
      {
        width:                                  100px;
        height:                                  20px;
        display:                               inline;
      }

      .playinglo
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #c6ef74;
      }

      .playinghi
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #7bad00;
        vertical-align:                           top;
        text-align:                              left;
      }

      .playlistlo
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #7bad00;
        vertical-align:                           top;
        text-align:                              left;
      }

      .playlisthi
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #c6ef74;
      }

      .playlistbox
      {
        width:                                  404px;
        height:                                 242px;
        margin:                                     0;
        border:                     #7bad00 1px solid;
        overflow:                                auto;
      }
    </style>

    <script type="text/javascript" src="swfobject-2.1.js"></script>

    <script type="text/javascript">
      var currentItem    =      -1;
      var previousItem   =      -1;
      var currentLength  =       0;
      var currentState   =  'NONE';
      var previousState  =  'NONE';
      var linkFlag       =   false;
      var player         =    null;

      function playerReady(thePlayer)
      {
        //alert(thePlayer);
        player = document.getElementById(thePlayer.id);
        addListeners()
        printPlaylistData();
      };

      function addListeners()
      {
        if (player)
        { 
          player.addControllerListener('ITEM', 'itemListener');
          player.addModelListener('STATE',     'stateListener');
        }
        else
        {
          setTimeout("addListeners()", 100);
        }
      };

      function itemListener(obj)
      { 
        if (obj.index != currentItem)
        {
          previousItem = currentItem;
          currentItem  = obj.index;
          setItemStyle(currentItem);
          //alert("sdffsdfsd");
        }
      };

      function stateListener(obj) //IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
      {
        currentState  = obj.newstate;
      //previousState = obj.oldstate;
        var tmp = document.getElementById("itm" + currentItem);

        if((currentState != previousState) || (currentItem != previousItem))
        {
          previousState = currentState;
          setItemStyle(currentItem);
        }
      };

      function mover(obj, idx)
      {
        if (idx == currentItem)
        {
          obj.className = 'playinghi';
        }
        else
        {
          obj.className = 'playlisthi';
        }
      };

      function mout(obj, idx)
      {
        linkFlag = false;

        if(idx == currentItem)
        {
          obj.className = 'playinglo';
        }
        else
        {
          obj.className = 'playlistlo';
        }
      };

      function setItemStyle(idx)
      {
        var count = getLength();
        for(var i = 0; i < count; i++)
        {
          var tmp = document.getElementById("itm" + i);

          if(tmp)
          {
            if(i == idx)
            {
              if(currentState == 'PLAYING')
              {
                tmp.className = 'playinglo';
              }
              //'playinghi';
              else
              {
                tmp.className = 'playlisthi';
              }
              //'playinglo';
            }
            else
            {
              tmp.className = 'playlistlo';
            }
          }
        }
      };

      function getLength()
      {
        currentLength = player.getPlaylist().length;
        return(currentLength);
      };

      function printPlaylistData()
      {
        var plst = null;
      //var currentPlaylist;
        var tmp = document.getElementById("plstDat");
      //tmp.innerHTML == "";
        plst = player.getPlaylist();

        if (plst)
        {
        //currentPlaylist = plst;
        //alert("fsdfasdfasdf");
          var txt = '<table cellPadding="2" width="380">';

          for(var i in plst)
          {
            txt += '<tr><td><table width="380" id="itm' + i + '" onclick="player.sendEvent(\'ITEM\',' + i + ');" ';
            txt += 'class="playlistlo" onmouseover="mover(this, ' + i + ')" onmouseout="mout(this, ' + i + ')">';
            txt += '<tr><td><img src="' + plst[i].image + '" width="90" height="68" title="Click to Play"></td>';
            txt += '<td width="276" valign=middle><p>';
            txt += plst[i].title + '<br>';
            txt += '<b>' + plst[i].author + '</b><br>';
            txt += '<b>Duration ' + plst[i].duration + ' Mnts</b><br>';
            txt += '<a href="' + plst[i].link + '" target="_self" title="' + plst[i].link + '"> more info</a><br>';
          //txt += plst[i].description;
            txt += '</p></td></tr></table></td></tr>';
          }
          txt += '</table>'; //alert(txt);

          if(tmp)
          {
            tmp.innerHTML = txt;
          }
        }
        else
        {
          setTimeout("printPlaylistData()", 100);
        }
      };

      function loadCheckedPlaylistData(theFileLoad)
      {
/*
        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);
          }
        }
*/
      //createPlayer(theFileLoad,'false');
      //printPlaylistData();
        player.sendEvent('STOP');
        player.sendEvent('LOAD', theFileLoad);
      //playerReady('player1');
        printPlaylistData();
      //return false;
      //printPlaylistData();
      };

      //deletePlayer("placeholder1");
      //printPlaylistData(theFile);

      var flashvars =
      {
        file:                 'playlist_mike.asx', 
        autostart:            'true',
        shuffle:              'false',
        repeat:               'list'
      }

      var params =
      {
        allowfullscreen:      'true',
        allowscriptaccess:    'always'
      }

      var attributes =
      {
        id:                   'player1',
        name:                 'player1'
      }

      swfobject.embedSWF("player-4.3.91.swf", "placeholder1", "400", "245", "9.0.115", false, flashvars, params, attributes);

/*
      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('playlist3.xml', false);
      };
*/
    </script>

  </head>

  <body>

    <div id="txt">
      <a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">JW FLV Media Player</a>
      <br />
      <br />
      With a customized playlist: 
      <a href="playlist_mixmedia.xml">playlist_mixmedia.xml</a>
    </div>

    <div id="playerroot">
      <div id="playerhandle">
        JW FLV Media Player
      </div>
      <div id="wrapper">
        <div id="placeholder1">
        </div>
      </div>
    </div>

    <div id="listroot">
      <div id="listhandle">
        Custom Playlist
      </div>
      <div class="playlistbox" align="left">
        <div id="plstDat">
        </div>
      </div>
    </div>

    <div id="links">
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_01.asx')">LOAD Playlist 1</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_02.asx')">LOAD Playlist 2</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_03.asx')">LOAD Playlist 3</a>
    </div>

  </body>

</html>

Looks nice also!    :D

Nice job andersen.    :)
 
 

Posted: Sat, 2008-11-01 00:25 Sam  
Anonymous's picture

Hi kLink,
Thanks very much for your reply. Till now my problem is not solved. I am using XML file for storing file information,but your using asx file, is any problem with using XML.

I expect the code that i have given is tested in your machine and your new code too. i have tried yesterday night but no hope.
Please let me know it is working with asx file.

Thanks Once again!!!!!

Posted: Sat, 2008-11-01 06:16 kLink  
Anonymous's picture

Any playlist format should work correctly with that code.

Posted: Sat, 2008-11-01 11:51 kLink  
Anonymous's picture

Yes Sam, it works well for me. Did you adjust the filenames for swfobject.js, player.swf, and all of the playlists (4 places)?

Posted: Sun, 2008-11-02 07:06 Sam  
Anonymous's picture

I have made that change and its working fine; only thing is, for the playlist to change I need to click the links twice.
can you please paste the js file here,i will try with your js file.

Posted: Sun, 2008-11-02 10:31 kLink  
Anonymous's picture

You can download swfobject v2.1 from the official source here: http://code.google.com/p/swfobject/

Posted: Tue, 2008-11-04 07:20 Sam  
Anonymous's picture

I though the best thing was to upload and show my example online.
http://prashantgeorge.com/jwtest/player_advanced.php
Once loaded, you will see that the player is loaded with the default playlist.xml. Now when I click the link LOAD Playlist 1, it actually loads the playlist 1(playlist1.xml) which you can make out by the change of video in the player. But the Playlist on the right does not change. Click on the Load Playlist 1 link again and the playlist on the right changes. <b>Another thing to note is even though the correct playlist does not get displayed when clicked first, if you click on the playlist item the correct video plays.</b>

I am guessing is that somehow the old playlist display is remaining cached. conduct another test http://prashantgeorge.com/jwtest/player_advanced.php load the page again. Click on the LOAD Playlist 1(playlist1.xml), you see that the playlist1.xml has loaded in the video player but does not display in the playlist holder. Now click Load Playlist 2(playlist.xml), you can see that the playlist.xml has been loaded in the video player but the playlist holder displays playlist.xml and not playlist1.xml. Click on Load Playlist 1 it loads playlist.xml into the video player but the Playlist Holder displays playlis1.xml. Even though the playlists are not displayed properly, when clicked on the item in the playlist the correct videos are played. This is very odd, t would be great if someone can help me out in rectifying this.

Posted: Wed, 2008-11-05 21:56 Leeveye  
Anonymous's picture

@ kLink

Thanks, your revised clean codes work PERFECTLY!!!
How can I use your above codes & also put the following playlists example in a dropdown-down selection above the jw flash player (example: http://home5.inet.tele.dk/nyboe/flash/mediaplayer/multipleplaylists.htm) :

    <div id="links">
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_01.asx')">LOAD Playlist 1</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_02.asx')">LOAD Playlist 2</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_03.asx')">LOAD Playlist 3</a>
    </div>

to something like this:

<form name="jump">
      <select name="plist_select">
           <option value="'playlist_mike_01.asx'">LOAD Playlist 1</option>
           <option value="'playlist_mike_02.asx'">LOAD Playlist 2</option>
           <option value="'playlist_mike_03.asx'">LOAD Playlist 3</option>
      </select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Select Playlist">
</form>

THANK YOU for an awesome player!!!

Posted: Thu, 2008-11-06 07:48 george  
Anonymous's picture

I just checke dthe link here. http://prashantgeorge.com/jwtest/player_advanced.php like sam said the playlist is only getting loaded in the video player. Visually it doesnt change unless you click it twice. seems like the playslist is not visually clearing when another playlist is selected.

Posted: Thu, 2008-11-06 10:05 kLink  
Anonymous's picture

 
@Leeveye,

Substitute the block of code for the form for the links code block.

Then use some CSS to postion the form. You can also delete the CSS for the "link" and the "links", since it's no longer needed.

      form.theForm
      {
        position:                      absolute;
        top:                               -1px;
        left:                              -1px;
        z-index:                              1;
      }

Adjust the positioning to suit your site.

Give your form a class name of "class="theForm" to match the CSS.

<form name="jump" class="theform">

The class name can be anything that you want to use, as long as the class name and the CSS name match.

Posted: Thu, 2008-11-06 10:42 Leeveye  
Anonymous's picture

I have removed the CSS for "link" and "links" and added the following CSS:

      form.theForm
      {
        position:                      absolute;
        top:                               -1px;
        left:                              -1px;
        z-index:                              1;
      }

I have replaced :

<div id="links">
<a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_01.asx')">LOAD Playlist 1</a>
<a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_02.asx')">LOAD Playlist 2</a>
<a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_03.asx')">LOAD Playlist 3</a>
</div>

with (substitue your playlist with mine of course :) )

<form name="jump" class="theform">
<select name="plist_select">
<option value="playlist_mike_01.asx">LOAD Playlist 1</option>
<option value="playlist_mike_02.asx">LOAD Playlist 2</option>
<option value="playlist_mike_03.asx">LOAD Playlist 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Select Playlist">
</form>

The dropdown menu shows but selecting a playlist doesn't do anything.. Am I missing something else? All the codes are the same as those you posted above with the changes I'd mentioned in this post..

Thank you once again..

Posted: Thu, 2008-11-06 11:52 Leeveye  
Anonymous's picture

I am now able to load the dropdown option BUT still nothing loads.. I get error 1009..

The code I replaced are:

<form name="plist" class="theform">
  <select name="plist_select">
<option value="/mods/playlists/chapters.xml">chapters</option>
<option value="/mods/playlists/playlist_mixmedia">playlist_mixmedia</option>
<option value="/mods/playlists/bliptv.xml">bliptv</option>
  </select>
                  <input onClick="loadCheckedPlaylistData()" type='button' value='Load Playlist!'>
</form>

I'm making a little head wave :) ..

I guess I need to know how to code the following into the form:
javascript:loadCheckedPlaylistData

As always, thank you for your help..

Posted: Thu, 2008-11-06 13:37 kLink  
Anonymous's picture

You need to get the playlist URL to the function loadCheckedPlaylistData(theFileLoad)

Here's one way to do that:

<form name="plist" class="theform">
  <select name="plist_select" onchange="loadCheckedPlaylistData(this.options[this.selectedIndex].value)">
    <option>Choose a new Playlist</option>
    <option value="/mods/playlists/chapters.xml">chapters</option>
    <option value="/mods/playlists/playlist_mixmedia.xml">playlist_mixmedia</option>
    <option value="/mods/playlists/bliptv.xml">bliptv</option>
  </select>
</form>

Posted: Thu, 2008-11-06 13:41 Leeveye  
Anonymous's picture

That works nicely.. However, the selected playlist contents will not list until I select a different playlist.. It appeared as though the playlist listing shows up after I change to a different playlist..

Thanks once again for your assistance..

Posted: Thu, 2008-11-06 14:44 kLink  
Anonymous's picture

Yeah, the print playlist logic needs a little changing, I'll post it soon.

Posted: Thu, 2008-11-06 14:55 Leeveye  
Anonymous's picture

Thank you!!

Posted: Thu, 2008-11-06 15:18 kLink  
Anonymous's picture

I highlighted the additions in bold. Also a couple of deleted lines.

This code has both the links and the drop-down menu for those who prefer both ways!    :D

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

  <head>

    <title>JW FLV Media Player with Separate Playlist</title>

    <style type="text/css">
      body
      {
        padding:                                    0;
        margin:                                     0;
        font-size:                               12px;
        font-family:          verdana,helvetica,arial;
        background-color:                     #ffffff;
      }

      #playerroot
      {
        position:                            absolute;
        top:                                    110px;
        left:                                    50px;
        width:                                  400px;
        height:                                 265px;
        border:                        #333 1px solid;
        border-bottom:                              0;
        background-color:                     #f4f4f4;
        z-index:                                    0;
      }

      #listroot
      {
        position:                            absolute;
        top:                                    110px;
        left:                                   455px;
        width:                                  400px;
        height:                                 265px;
        border:                        #333 1px solid;
        background-color:                     #f4f4f4;
        z-index:                                    0;
      }

      #playerhandle
      {
        width:                                  396px;
        padding:                                  2px;
        margin:                                   2px;
        color:                                  white;
        background-color:                     #426300;
        font-weight:                             bold;
      }

      #listhandle
      {
        width:                                  400px;
        padding:                                  2px;
        margin:                                   2px;
        color:                                  white;
        background-color:                     #426300;
        font-weight:                             bold;
      }

      #txt
      {
        position:                            absolute;
        left:                                    50px;
        top:                                     30px;
      }

      #links
      {
        position:                            absolute;
        top:                                     88px;
        left:                                    50px;
        width:                                  397px;
        height:                                  15px;
        padding:                                  3px;
        border:                        #333 1px solid;
        background-color:                     #f4f4f4;
      }

      #link
      {
        width:                                  150px;
        display:                               inline;
      }

      form.theForm
      {
        position:                            absolute;
        top:                                     88px;
        left:                                   455px;
        z-index:                                    1;
      }

      .playinglo
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #c6ef74;
      }

      .playinghi
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #7bad00;
        vertical-align:                           top;
        text-align:                              left;
      }

      .playlistlo
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #7bad00;
        vertical-align:                           top;
        text-align:                              left;
      }

      .playlisthi
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #c6ef74;
      }

      .playlistbox
      {
        width:                                  404px;
        height:                                 242px;
        margin:                                     0;
        border:                     #7bad00 1px solid;
        overflow:                                auto;
      }
    </style>

    <script type="text/javascript" src="swfobject-2.1.js"></script>

    <script type="text/javascript">
      var currentItem    =      -1;
      var previousItem   =      -1;
      var currentLength  =       0;
      var currentState   =  'NONE';
      var previousState  =  'NONE';
      var linkFlag       =   false;
      var player         =    null;

      function playerReady(thePlayer)
      {
        player = document.getElementById(thePlayer.id);
        addListeners()
        <strong>Delete next line
        printPlaylistData();</strong>
      };

      function addListeners()
      {
        if (player)
        { 
          player.addControllerListener('ITEM',     'itemListener');
          <strong>player.addControllerListener('PLAYLIST', 'playlistListener');</strong>
          player.addModelListener('STATE',         'stateListener');
        }
        else
        {
          setTimeout("addListeners()", 100);
        }
      };

      function itemListener(obj)
      { 
        if (obj.index != currentItem)
        {
          previousItem = currentItem;
          currentItem  = obj.index;
          setItemStyle(currentItem);
        }
      };

      <strong>function playlistListener(obj)
      {
        printPlaylistData();
      };</strong>

      function stateListener(obj)
      {
        currentState  = obj.newstate;
        var tmp = document.getElementById("itm" + currentItem);

        if((currentState != previousState) || (currentItem != previousItem))
        {
          previousState = currentState;
          setItemStyle(currentItem);
        }
      };

      function mover(obj, idx)
      {
        if (idx == currentItem)
        {
          obj.className = 'playinghi';
        }
        else
        {
          obj.className = 'playlisthi';
        }
      };

      function mout(obj, idx)
      {
        linkFlag = false;

        if(idx == currentItem)
        {
          obj.className = 'playinglo';
        }
        else
        {
          obj.className = 'playlistlo';
        }
      };

      function setItemStyle(idx)
      {
        var count = getLength();
        for(var i = 0; i < count; i++)
        {
          var tmp = document.getElementById("itm" + i);

          if(tmp)
          {
            if(i == idx)
            {
              if(currentState == 'PLAYING')
              {
                tmp.className = 'playinglo';
              }
              //'playinghi';
              else
              {
                tmp.className = 'playlisthi';
              }
              //'playinglo';
            }
            else
            {
              tmp.className = 'playlistlo';
            }
          }
        }
      };

      function getLength()
      {
        currentLength = player.getPlaylist().length;
        return(currentLength);
      };

      function printPlaylistData()
      {
        var playlist = null;
        var tmp = document.getElementById("plstDat");
        playlist = player.getPlaylist();

        if(playlist)
        {
          var txt = '<table cellPadding="2" width="380">';

          for(var i in playlist)
          {
            txt += '<tr><td><table width="380" id="itm' + i + '" onclick="player.sendEvent(\'ITEM\',' + i + ');" ';
            txt += 'class="playlistlo" onmouseover="mover(this, ' + i + ')" onmouseout="mout(this, ' + i + ')">';
            txt += '<tr><td><img src="' + playlist[i].image + '" width="90" height="68" title="Click to Play"></td>';
            txt += '<td width="276" valign=middle><p>';
            txt += playlist[i].title + '<br>';
            txt += '<b>' + playlist[i].author + '</b><br>';
            txt += '<b>Duration ' + playlist[i].duration + ' Mnts</b><br>';
            txt += '<a href="' + playlist[i].link + '" target="_self" title="' + playlist[i].link + '"> more info</a><br>';
          //txt += playlist[i].description;
            txt += '</p></td></tr></table></td></tr>';
          }
          txt += '</table>'; //alert(txt);

          if(tmp)
          {
            tmp.innerHTML = txt;
          }
        }
        else
        {
          setTimeout("printPlaylistData()", 100);
        }
      };

      function loadCheckedPlaylistData(theFileLoad)
      {

/*
        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);
          }
        }
*/

        player.sendEvent('STOP');
        player.sendEvent('LOAD', theFileLoad);
        <strong>Delete next line
        printPlaylistData();</strong>
      };

      var flashvars =
      {
        file:                 'playlist.xml', 
        autostart:            'true',
        shuffle:              'false',
        repeat:               'list'
      };

      var params =
      {
        allowfullscreen:      'true',
        allowscriptaccess:    'always'
      };

      var attributes =
      {
        id:                   'player1',
        name:                 'player1'
      };

      swfobject.embedSWF("player-4.3.91.swf", "placeholder1", "400", "245", "9.0.115", false, flashvars, params, attributes);
    </script>

  </head>

  <body>

    <div id="txt">
      <a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">JW FLV Media Player</a>
      <br />
      <br />
      With a customized playlist: 
      <a href="playlist_mixmedia.xml">playlist_mixmedia.xml</a>
    </div>

    <div id="playerroot">
      <div id="playerhandle">
        JW FLV Media Player
      </div>
      <div id="wrapper">
        <div id="placeholder1">
        </div>
      </div>
    </div>

    <div id="listroot">
      <div id="listhandle">
        Custom Playlist
      </div>
      <div class="playlistbox" align="left">
        <div id="plstDat">
        </div>
      </div>
    </div>

    <div id="links">
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_01.asx')">LOAD Playlist 1</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_02.asx')">LOAD Playlist 2</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist_mike_03.asx')">LOAD Playlist 3</a>
    </div>

    <form name="plist" class="theForm">
      <select name="plist_select" onchange="loadCheckedPlaylistData(this.options[this.selectedIndex].value)" style="width:412px">
        <option>Choose a new Playlist</option>
        <option value="playlist_mike_01.asx">Playlist One</option>
        <option value="playlist_mike_02.asx">Playlist Two</option>
        <option value="playlist_mike_03.asx">Playlist Three</option>
      </select>
    </form>

  </body>

</html>

Posted: Thu, 2008-11-06 16:05 Leeveye  
Anonymous's picture

The code doesn't load the player nor the playlist.. I'll tweak around it a little bit.. Thanks again for all your assistance..

I copy the whole code and just change the locations of playlists and player.swf and swfobject.js

Posted: Thu, 2008-11-06 16:34 Leeveye  
Anonymous's picture

Sorry, my fault.. The codes work perfectly!!.. I forgot to remove some of your footnotes.. Thanks for all your help!!

Posted: Thu, 2008-11-06 18:25 kLink  
Anonymous's picture

 
@Leeveye,

That's good to hear. Good Luck!
 
                                                                                        :D

Posted: Thu, 2008-11-27 10:25 george  
Anonymous's picture

hi kLink

i also wanted to implement this script. i followed the code above... but for me i am not seeing any playlist. i have uploaded my file here using yousendit http://www.yousendit.com/download/TTZsTXRabWdubHhFQlE9PQ if you have time can u have a look at it

heres my code.... i am also putting a copy of my xml just in case if it's the issue

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <style type="text/css">
      body
      {
        padding:                                    0;
        margin:                                     0;
        font-size:                               12px;
        font-family:          verdana,helvetica,arial;
        background-color:                     #ffffff;
      }

      #playerroot
      {
        position:                            absolute;
        top:                                    110px;
        left:                                    50px;
        width:                                  400px;
        height:                                 265px;
        border:                        #333 1px solid;
        border-bottom:                              0;
        background-color:                     #f4f4f4;
        z-index:                                    0;
      }

      #listroot
      {
        position:                            absolute;
        top:                                    110px;
        left:                                   455px;
        width:                                  400px;
        height:                                 265px;
        border:                        #333 1px solid;
        background-color:                     #f4f4f4;
        z-index:                                    0;
      }

      #playerhandle
      {
        width:                                  396px;
        padding:                                  2px;
        margin:                                   2px;
        color:                                  white;
        background-color:                     #426300;
        font-weight:                             bold;
      }

      #listhandle
      {
        width:                                  400px;
        padding:                                  2px;
        margin:                                   2px;
        color:                                  white;
        background-color:                     #426300;
        font-weight:                             bold;
      }

      #txt
      {
        position:                            absolute;
        left:                                    50px;
        top:                                     30px;
      }

      #links
      {
        position:                            absolute;
        top:                                     88px;
        left:                                    50px;
        width:                                  397px;
        height:                                  15px;
        padding:                                  3px;
        border:                        #333 1px solid;
        background-color:                     #f4f4f4;
      }

      #link
      {
        width:                                  150px;
        display:                               inline;
      }

      form.theForm
      {
        position:                            absolute;
        top:                                     88px;
        left:                                   455px;
        z-index:                                    1;
      }

      .playinglo
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #c6ef74;
      }

      .playinghi
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #7bad00;
        vertical-align:                           top;
        text-align:                              left;
      }

      .playlistlo
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #7bad00;
        vertical-align:                           top;
        text-align:                              left;
      }

      .playlisthi
      {
        font: 12px verdana,arial,helvetica,sans-serif;
        color:                                #000000;
        background-color:                     #c6ef74;
      }

      .playlistbox
      {
        width:                                  404px;
        height:                                 242px;
        margin:                                     0;
        border:                     #7bad00 1px solid;
        overflow:                                auto;
      }
    </style>

    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
      var currentItem    =      -1;
      var previousItem   =      -1;
      var currentLength  =       0;
      var currentState   =  'NONE';
      var previousState  =  'NONE';
      var linkFlag       =   false;
      var player         =    null;

      function playerReady(thePlayer)
      {
        player = document.getElementById(thePlayer.id);
        addListeners()
      };

      function addListeners()
      {
        if (player)
        {
          player.addControllerListener('ITEM',     'itemListener');
          player.addControllerListener('PLAYLIST', 'playlistListener');
          player.addModelListener('STATE',         'stateListener');
        }
        else
        {
          setTimeout("addListeners()", 100);
        }
      };

      function itemListener(obj)
      {
        if (obj.index != currentItem)
        {
          previousItem = currentItem;
          currentItem  = obj.index;
          setItemStyle(currentItem);
        }
      };

      function playlistListener(obj)
      {
        printPlaylistData();
      };

      function stateListener(obj)
      {
        currentState  = obj.newstate;
        var tmp = document.getElementById("itm" + currentItem);

        if((currentState != previousState) || (currentItem != previousItem))
        {
          previousState = currentState;
          setItemStyle(currentItem);
        }
      };

      function mover(obj, idx)
      {
        if (idx == currentItem)
        {
          obj.className = 'playinghi';
        }
        else
        {
          obj.className = 'playlisthi';
        }
      };

      function mout(obj, idx)
      {
        linkFlag = false;

        if(idx == currentItem)
        {
          obj.className = 'playinglo';
        }
        else
        {
          obj.className = 'playlistlo';
        }
      };

      function setItemStyle(idx)
      {
        var count = getLength();
        for(var i = 0; i < count; i++)
        {
          var tmp = document.getElementById("itm" + i);

          if(tmp)
          {
            if(i == idx)
            {
              if(currentState == 'PLAYING')
              {
                tmp.className = 'playinglo';
              }
              //'playinghi';
              else
              {
                tmp.className = 'playlisthi';
              }
              //'playinglo';
            }
            else
            {
              tmp.className = 'playlistlo';
            }
          }
        }
      };

      function getLength()
      {
        currentLength = player.getPlaylist().length;
        return(currentLength);
      };

      function printPlaylistData()
      {
        var playlist = null;
        var tmp = document.getElementById("plstDat");
        playlist = player.getPlaylist();

        if(playlist)
        {
          var txt = '<table cellPadding="2" width="380">';

          for(var i in playlist)
          {
            txt += '<tr><td><table width="380" id="itm' + i + '" onclick="player.sendEvent(\'ITEM\',' + i + ');" ';
            txt += 'class="playlistlo" onmouseover="mover(this, ' + i + ')" onmouseout="mout(this, ' + i + ')">';
            txt += '<tr><td><img src="' + playlist[i].image + '" width="90" height="68" title="Click to Play"></td>';
            txt += '<td width="276" valign=middle><p>';
            txt += playlist[i].title + '<br>';
            txt += '<b>' + playlist[i].author + '</b><br>';
            txt += '<b>Duration ' + playlist[i].duration + ' Mnts</b><br>';
            txt += '<a href="' + playlist[i].link + '" target="_self" title="' + playlist[i].link + '"> more info</a><br>';
          //txt += playlist[i].description;
            txt += '</p></td></tr></table></td></tr>';
          }
          txt += '</table>'; //alert(txt);

          if(tmp)
          {
            tmp.innerHTML = txt;
          }
        }
        else
        {
          setTimeout("printPlaylistData()", 100);
        }
      };

      function loadCheckedPlaylistData(theFileLoad)
      {

/*
        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);
          }
        }
*/

        player.sendEvent('STOP');
        player.sendEvent('LOAD', theFileLoad);
      };

      var flashvars =
      {
        file:                 'playlist.xml',
        autostart:            'true',
        shuffle:              'false',
        repeat:               'list'
      };

      var params =
      {
        allowfullscreen:      'true',
        allowscriptaccess:    'always'
      };

      var attributes =
      {
        id:                   'player1',
        name:                 'player1'
      };

      swfobject.embedSWF("player.swf", "placeholder1", "400", "245", "9", false, flashvars, params, attributes);
    </script>

  </head>

  <body>

    <div id="playerroot">
      <div id="playerhandle">
        JW FLV Media Player
      </div>
      <div id="wrapper">
        <div id="placeholder1">
        </div>
      </div>
    </div>

    <div id="listroot">
      <div id="listhandle">
        Custom Playlist
      </div>
      <div class="playlistbox" align="left">
        <div id="plstDat">
        </div>
      </div>
    </div>

    <div id="links">
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist.xml')">LOAD Playlist 1</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist1.xml')">LOAD Playlist 2</a>
      <a id="link" href="javascript:loadCheckedPlaylistData('playlist2.xml')">LOAD Playlist 3</a>
    </div>

    <form name="plist" class="theForm">
      <select name="plist_select" onchange="loadCheckedPlaylistData(this.options[this.selectedIndex].value)" style="width:412px">
        <option>Choose a new Playlist</option>
        <option value="playlist.xml">Playlist One</option>
        <option value="playlist1.xml">Playlist Two</option>
        <option value="playlist2.xml">Playlist Three</option>
      </select>
    </form>

  </body>

</html>

xml code used

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<track>
<title>a.m.e.r.i.k.a</title>
<creator>Vivie</creator>
<location>1.flv</location>
<info>http://www.metinberlin.org</info>
<duration>12</duration>
<image>1.jpg</image>
<annotation>The art exhibition is over now - but the song is still cute</annotation>
</track>

<track>
<title>Test</title>
<creator>Anonymous</creator>
<location>2.flv</location>
<info>http://www.jeroenwijering.com</info>
<duration>12</duration>
<image>2.jpg</image>
<annotation>Classical TV testpicture - and the annoying 440hz tone</annotation>
</track>

</trackList>

</playlist>

Posted: Thu, 2008-11-27 13:12 andersen  
Anonymous's picture

@george - are you testing online ? - the javascript api only functions online on a webserver for flash security reasons !

Posted: Mon, 2008-12-01 08:39 george  
Anonymous's picture

@andersen
It worked thanks, in my hurry i forgot to copy it and test in the wampserver locally on my machine..

Only one issue. how do you make the first item of play list play every time a new play list is selected. Currently if i select say the second item in the first play list, and then select the second play list, there also it plays the second item by default. Can we make it so that by default when any play list is selected the first item in it plays.

Another problem is there will be cases when the playlist items may vary between various playlist. so if we select say 4th item in the first playlist then switch over to the second playlist which has only two items this may cause error.

Any Quick Fix for This.

Posted: Mon, 2008-12-01 11:34 andersen  
Anonymous's picture

you just need to reset the item numbers - find this line and change <select name="plist_select" onchange="currentItem=0; previousItem=-1; loadCheckedPlaylistData(this.options[this.selectedIndex].value)" style="width:412px">

Posted: Fri, 2008-12-05 10:26 george  
Anonymous's picture

@Andersen

I tried using the method suggested by you. But still the playlist does not start playing from the first item. Instead, it caches the itemstate selected and retains it for every other playlist selected. After searching, I came across another example http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_6-2-0-0.html, where an extensive controlling of the playlist which is show case. I came across "player.sendEvent('ITEM',0)". Can this be used to reset the playlist and ensure it starts playing from the first item.

Posted: Fri, 2008-12-05 10:54 andersen  
Anonymous's picture

yes, indeed ! - that ought to do it...

Posted: Sat, 2008-12-06 05:34 george  
Anonymous's picture

@Andersen

We tried doing this and still we are not getting it. can't actually make out where the issue is exactly. how ever much we try somehow it starts playing from the previously selected itemstate. :(

Posted: Sat, 2008-12-06 18:48 andersen  
Anonymous's picture

@george - ok, here is an example - http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/custom_playlist_multiple.html

it uses reinstantiating of the player, to keep the script simple and make absolutely sure the player is reset...

Posted: Tue, 2009-02-10 22:00 brejktru  
Anonymous's picture

@andersen: works perfectly, nice one! but i'm having a strange problem. when i include prototype library a bunch of new items with "undefined" contents show up on the playlist... i'm debugging this problem for 2 hours now and I still don't have a clue what's going on ... this is probably because of my poor javascript skills :)

any help would be appreciated ...

Posted: Fri, 2010-01-22 12:31 Bolington  
Anonymous's picture

Hi !!

I follow the example related here : http://prashantgeorge.com/jwtest/player_advanced.php

There is a problem with the playlists : some blank datas are created in the playlists, and those datas are not inclued in the *.xml files... In IE, the blank "video" are on the top, in Firefox, they are under the real playlist...

What is wrong in my code ??

PS : i included the code in a joomla article...

Thanks for your help !!!!

Posted: Sat, 2010-01-23 06:52 Bolington  
Anonymous's picture

Hi !!

No idea ??

Thanks !!!

Posted: Mon, 2010-01-25 13:27 Ethan LongTail  
Anonymous's picture

What's the issue here - http://prashantgeorge.com/jwtest/player_advanced.php seems to be working fine.

Posted: Wed, 2010-01-27 07:16 Bolington  
Anonymous's picture

Hi !!

Yes, it works, but in my case, it does not !!!

When i use the printplaylistdata function, datas appears like this :

hsbToRgb:
undefined
undefined
undefined

rgbToHsb:
undefined
undefined
undefined

hexToRgb:
undefined
undefined
undefined

rgbToHex:
undefined
undefined
undefined

test:
undefined
undefined
undefined

each:
undefined
undefined
undefined

getLast:
undefined
undefined
undefined

getRandom:
undefined
undefined
undefined

include:
undefined
undefined
undefined

merge:
undefined
undefined
undefined

extend:
undefined
undefined
undefined

associate:
undefined
undefined
undefined

contains:
undefined
undefined
undefined

remove:
undefined
undefined
undefined

copy:
undefined
undefined
undefined

indexOf:
undefined
undefined
undefined

some:
undefined
undefined
undefined

every:
undefined
undefined
undefined

map:
undefined
undefined
undefined

filter:
undefined
undefined
undefined

forEach:
undefined
undefined
undefined

0:
Big Buck Bunny - FLV video
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.flv

1:
Big Buck Bunny - VP6 video
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.vp6

2:
Big Buck Bunny - MP4 video
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.mp4

3:
Big Buck Bunny - AAC audio
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.m4a

4:
Big Buck Bunny - MP3 audio
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.mp3

5:
Big Buck Bunny - JPG image
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.jpg

6:
Big Buck Bunny - PNG image
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.png

7:
Big Buck Bunny - GIF image
Blender Foundation
http://www.longtailvideo.com/jw/upload/bunny.gif

Any idea ??

Very hard to solve !!

Posted: Wed, 2010-01-27 07:48 Bolington  
Anonymous's picture

Hi !

Problem comes from mootools.js

I have to make a brand new compilation of this file...

Hope it will work !

Thanks !

Posted: Wed, 2010-01-27 15:57 Ethan LongTail  
Anonymous's picture

Ahh okay, let me know, thanks!

Posted: Thu, 2010-01-28 11:11 bolington  
Anonymous's picture

Hi !

In joomla, i found a piece of script that allow me to disable mootools from front end and to keep it active in the back end of the site.

Now i have to implement some features, like duration of videos (not in seconds, but in minutes), and why not, the "statistic" of each video file (how many times each file was seen). I hope that is possible, because it would be very helpfull for the website i plan to create.

Thanks,

Bolington

Posted: Wed, 2010-02-03 03:52 Bolington  
Anonymous's picture

I did It !

Now i get time in mm:ss format !! Just a piece of code to insert !!

Next step : get number of time each video were played... A little bit more difficult...

If someone get an idea....

Thanks,

Bolington

Posted: Wed, 2010-02-03 14:32 Ethan LongTail  
Anonymous's picture

Can you provide a link to where you are running this? Thank you.

Posted: Thu, 2010-02-04 06:34 Bolington  
Anonymous's picture

Hello !

I can do better : I'll tell you how i did it :

In the original code, there's a function called "function printPlaylistData()":

function printPlaylistData()
{
var playlist = null;
var tmp = document.getElementById("plstDat");
playlist = player.getPlaylist();

if(playlist)
{
var txt = '<table cellPadding="2" width="380">';

for(var i in playlist)
{
txt += '<tr><td><table width="380" id="itm' + i + '" onclick="player.sendEvent(\'ITEM\',' + i + ');" ';
txt += 'class="playlistlo" onmouseover="mover(this, ' + i + ')" onmouseout="mout(this, ' + i + ')">';
txt += '<tr><td><img src="' + playlist[i].image + '" width="90" height="68" title="Click to Play"></td>';
txt += '<td width="276" valign=middle><p>';
txt += playlist[i].title + '<br>';
txt += '<b>' + playlist[i].author + '</b><br>';
txt += '<b>Duration ' + playlist[i].duration + ' Mnts</b><br>';
txt += '<a href="' + playlist[i].link + '" target="_self" title="' + playlist[i].link + '"> more info</a><br>';
//txt += playlist[i].description;
txt += '</p></td></tr></table></td></tr>';
}
txt += '</table>'; //alert(txt);

if(tmp)
{
tmp.innerHTML = txt;
}
}
else
{
setTimeout("printPlaylistData()", 100);
}
};

Just after

for(var i in plst)
             {

I inserted my function to calculate time in mm:ss format from duration in sec provided by the playlist xml file

   var t = plst[i].duration;
   var s = t%60;
   var m = t%60;
      switch (s) {
case 0: s="00";
break;
case 1: s="01";
break;
case 2: s="02";
break;
case 3: s="03";
break;
case 4: s="04";
break;
case 5: s="05";
break;
case 6: s="06";
break;
case 7: s="07";
break;
case 8: s="08";
break;
case 9: s="09";
break;
}
     switch (m) {
case 0: m="00";
break;
case 1: m="01";
break;
case 2: m="02";
break;
case 3: m="03";
break;
case 4: m="04";
break;
case 5: m="05";
break;
case 6: m="06";
break;
case 7: m="07";
break;
case 8: m="08";
break;
case 9: m="09";
break;
}
    format = m+":"+s;

Then, to display this in my playlist, i've just inserted

txt += '<div>'+format+'</div>';

Hope this will help !

Bolington

PS : i'm still looking for a solution to display counter view in playlist. With YourAnalytics plugin, i can record the value in database. I'm able to display it, and i'm also able to create a xml file from the table in database... but i don't know how to proceed, because Javascript and PHP can not communicate.... Please help !!!

Posted: Thu, 2010-02-04 15:34 Ethan LongTail  
Anonymous's picture

Thanks!

Posted: Sun, 2010-02-28 14:35 Luciano  
Anonymous's picture

please Ethan .... Bolington .. ......

HEY excuse my english dont know if i am at the right topic ....
Please some help !!!
i have a player v5 with multiple playlists .....
i want the playlist always starts at the first item of each list but ....the player memorizes ( i guess) can i disable cookies or sometinhg ??? mark item 1 ??
what can i do ???

please i really need help thanks

player at www.arz5.com/2 ****

Posted: Mon, 2010-03-01 12:59 Ethan LongTail  
Anonymous's picture

You can use the item flashvar to set what item of the playlist to start at.

Posted: Wed, 2010-03-03 12:13 Luciano  
Anonymous's picture

thanks for your anwser

please ethan do you have any example ???

of the fhlashvar item in the XML playlist???

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

<script type="text/javascript">
var s = new SWFObject('media/player.swf', 'mpl1', '625', '235', '9.0.124');
s.addParam('allowscriptaccess', 'always');
s.addParam('allowfullscreen', 'true');
s.addVariable('playlistfile', 'http://www.arz5.com/media/list_arz5.xml');
s.addVariable('playlist', 'left');
s.addVariable('playlistsize', '200');
s.addVariable('stretching', 'uniform');
s.addVariable('repeat', 'list');
s.addVariable('item','0');
s.addVariable('shuffle', 'false');
s.addVariable('smoothing', 'false');
s.addVariable('bufferlength', '6');
s.addVariable('volume', '85');
s.addVariable('backcolor','111111');
s.addVariable('frontcolor','cccccc');
s.addVariable('lightcolor','36C7F8');
s.addVariable('screencolor','000000');
s.addVariable('id', 'mpl');
s.addVariable('autostart', 'true');
s.addVariable('playlist.thumbs','false');
s.addVariable('plugins', 'revolt');
s.addVariable('revolt.position','over');
s.addVariable('mute','false');
s.addVariable('revolt.size','300');
s.addVariable('revolt.gain','2');
s.write('placeholder');

function gid(name)
{
return document.getElementById(name);
};
</script>

Posted: Wed, 2010-03-03 12:16 Luciano  
Anonymous's picture

<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>ARZ5 Playlist</title>
<info>http://www.ARZ5.com/</info>
<annotation>ARZ5.com STUDIO</annotation>
<trackList>

<track>
<title>ARZ5 STUDIO</title>
<annotation>COMERCIAIS TV Videos</annotation>
<location>http://www.arz5.com/mp3/arz5jingle.mp3</location>
<image>http://www.arz5.com/media/images/img-comerciais.jpg</image> <item>0</item>
</track> ???????????????

</trackList>
</playlist>

Posted: Wed, 2010-03-03 12:32 Luciano  
Anonymous's picture

please ethan could you please ....also check if the 'CROSSDOMAIN " scrypte is correct ???
( because the player stop works at mozila firefox !!! kk ) really thanks for your help and support .................
Luciano

Posted: Wed, 2010-03-03 12:38 Luciano  
Anonymous's picture

the complement DONWLOADHELPER 4.7 of mozila firefox was bloking the player .. this"" problem is solved!!!

Posted: Wed, 2010-03-03 13:27 Ethan LongTail  
Anonymous's picture

NP! :)

Posted: Wed, 2010-03-03 18:53 Luciano  
Anonymous's picture

hey Ethan

the solved problem was about the 'CROSSDOMAIN in mozila firefox
]
my problem with the start item still there ;( .. please take alook at the player homepage youlld see .......... after change the playlist ... the player never starts at the first one of the list ......................
what function could i enable ou disable to stop
this ??? pleasssse !!! at version 3 was all right ( and the item playing was higlight ttoo ) in this v5 both funciontions are not working well !1 really need your help !!!

the example of a playlist with a item is correct ??
player at www.arz5.com/2

Posted: Wed, 2010-03-03 20:38 Ethan LongTail  
Anonymous's picture

it works fine for me on - www.arz5.com/2

Posted: Wed, 2010-03-03 23:20 Luciano  
Anonymous's picture

please ethan ......... if you could see again >.
1-choose one playlist ( at playlist menu * multiple playlists) .......
2- pass/listem 3 or 4 items ...
3-change the playlist .......
4- and returns to the first playlist ...... ..........

the list will not start at the first item ( the player "memorizes" or something * cookies*** .......am i right ?? what can i do??
----- ......... the <item>0</item>
into the xml was correct ?????

thanks again

Posted: Thu, 2010-03-04 14:04 Alf  
Anonymous's picture

 
Use a small JavaScript function to load your new playlist, then index to item 0 after a small delay.

      function loadPlaylist(playlist)
      {
        gid('mpl1').sendEvent('LOAD', {'file':playlist});
        setTimeout("gid('mpl1').sendEvent('ITEM', 0);", 250);
      };
<select id="sel1" name="sel1" onchange="loadPlaylist(document.theForm.sel1.value);" size="1">
Posted: Thu, 2010-03-04 20:00 Luciano  
Anonymous's picture

hi alf thanks
i cant understand where i put this JavaScript function ... i have to replace something ?? did you see the player working at the page ??/ can you put the complete code??? hh i really need help ... poor english ( im brazilian) and poor knowllegdre hhhh im f*** hahah ...........

Posted: Thu, 2010-03-04 21:03 Alf  
Anonymous's picture

 
New code is in bold. Just replace all of it to also correct some other mistakes.

<script type="text/javascript"> 
  var s = new SWFObject('media/player.swf', 'mpl1', '625', '235', '9.0.124');
      s.addParam('allowscriptaccess',       'always');
      s.addParam('allowfullscreen',         'true');
      s.addVariable('playlistfile',         'http://www.arz5.com/media/list_arz5.xml');
      s.addVariable('playlist',             'left');
      s.addVariable('playlistsize',         '200');
      s.addVariable('stretching',           'uniform');
      s.addVariable('repeat',               'list');
      s.addVariable('item',                 '0');
      s.addVariable('shuffle',              'false');
      s.addVariable('smoothing',            'false');
      s.addVariable('bufferlength',         '6');
      s.addVariable('volume',               '85');
      s.addVariable('mute',                 'false');
      s.addVariable('backcolor',            '111111');
      s.addVariable('frontcolor',           'CCCCCC');
      s.addVariable('lightcolor',           '36C7F8');
      s.addVariable('screencolor',          '000000'); 
      s.addVariable('playlist.thumbs',      'false');
      s.addVariable('plugins',              'revolt');
      s.addVariable('revolt.position',      'over');
      s.addVariable('revolt.size',          '300');
      s.addVariable('revolt.gain',          '2');
      s.addVariable('id',                   'mpl1');
      s.addVariable('autostart',            'true');
      s.write('placeholder');
 
 
  <strong>function loadPlaylist(playlist)</strong>
  <strong>{</strong>
    <strong>gid('mpl1').sendEvent('LOAD', {'file':playlist});</strong>
    <strong>setTimeout("gid('mpl1').sendEvent('ITEM', 0);", 250);</strong>
  <strong>};</strong>

  function gid(name)
  {
    return document.getElementById(name);
  };
</script> 

Change this:

<select id="sel1" name="sel1" onchange="gid('mpl1').sendEvent('LOAD', {file:document.theForm.sel1.value});" size="1">

to this:

<select id="sel1" name="sel1" onchange="loadPlaylist(document.theForm.sel1.value);" size="1">

Posted: Sat, 2010-03-06 10:54 Luciano  
Anonymous's picture

hey alf works perfectly !!!!!!!! youre very good !! thanks so much !!!!!!!!!!!!!!!!!!!!!!! by the way .. do you know how to highlight the playing item ??? in V3 was automatic but in V5 ... i cannot do it !! THANKS AGAIN !!!!

Posted: Sat, 2010-03-06 11:04 Alf  
Anonymous's picture

 
Good to hear it worked.

The v5 player does not highlight the playing item. I hope Longtailvideo adds this feature soon.

  • Locked