Linking by URL to playlist

14 replies [Last post]

Posted: Wed, 2009-06-10 14:32 Jessica M.

Hi everyone,

I'm using this coding from linking to a item inside a playlist.
http://www.longtailvideo.com/support/forum/JavaScript-Interaction/10045/Direct-URL-to-video-in-playl... --- Example of using a query parameter to play an item from a playlist using the v4.x player.swf and v2.1 swfobject.js. by Klink

And what I need is to link by title or reverse the playlist. The playlist gets populated with new tracks on top so this moves the item numbers. So I don't know if to link instead by title inside the playlist. I tried this thread http://www.longtailvideo.com/support/forum/JavaScript-Interaction/15229/Direct-Linking-Part-2#msg104... but it didn't work for me.

Here our my pages. When you click on a announcement it takes you to a corresponding video on a player on another page.

http://www.delmar.edu/engl/wrtctr/index_new.php

http://www.delmar.edu/engl/wrtctr/homepage_announcements/

This is how my link is. http://www.delmar.edu/engl/wrtctr/homepage_announcements/index.html?item=1

but like I said I add tracks at the top so the item number will keep changing on me which will give me a headache trying to update all of them. I know there has to be a different way.

Help, please. Thanks.

Posted: Wed, 2009-06-10 18:19 Blop

Play item by Title: http://www.longtailvideo.com/support/forum/JavaScript-Interaction/10045/Direct-URL-to-video-in-playl...

Playlist reverse sort: http://www.longtailvideo.com/support/forum/Setup-Problems/11734/Playlist-in-reversed-order

Play by Title (Title in URL query parameter) has been heavily tested and works well: http://www.longtailvideo.com/support/forum/JavaScript-Interaction/15229/Direct-Linking-Part-2#msg104...

All of these, and MUCH more, can be found by using the search box at the top of this page!!!

Posted: Wed, 2009-06-10 18:23 Jessica M.

I'll try these...believe me the search box is my friend and I think I've been searching for hours.

Posted: Wed, 2009-06-10 18:32 Jessica M.

It's funny all the url's you listed I've tried (I've seen all those post and more..I even have them saved to my favorites)...have you tried these process all together or are you just giving me posts to look at. I used the reverse script posted with the direct url to item...but couldn't get them to work well together. It would play the item passed through the url, for like a split second and then it would reverse the playlist in the player and stop the video that was playing.

And the last link you gave me didn't work but I'll even do what it says and post again. Maybe after staring at it for a hour or so maybe I missed something.

Posted: Wed, 2009-06-10 19:13 Blop

I personally wrote and tested all of that code. It's running on my own development servers as well as for the various users who requested those functions in the referenced threads.

The player's behavior has changed since some of that code was posted, this is a better playAway() function:

      //...start the player on the query parameter item
      function playAway()
      {
        try
        {
          playlist = player.getPlaylist();
        }
        catch(e)
        {
          setTimeout("addListeners();", 100);
        }

        player.addControllerListener('ITEM', 'itemMonitor');
        player.addModelListener('TIME',      'timeMonitor');
        player.sendEvent('ITEM', item);
gid('playaway').innerHTML = 'playAway:<br />Player: ' + player.id + '<br />File: ' + file + '<br />Item: ' + item + '<br />Time: ' + time;
      };

Add/Subtract Listeners as needed.

Give me a bit of time and I'll go through your page at: http://www.delmar.edu/engl/wrtctr/homepage_announcements/index.html?item=1 and then post a functioning version here as well as a test page on my dev. server.

Posted: Wed, 2009-06-10 19:23 Jessica M.

Here's my url for following post that I tried...it only plays the first video.

http://www.longtailvideo.com/support/forum/JavaScript-Interaction/15229/Direct-Linking-Part-2#msg104...

http://www.delmar.edu/engl/wrtctr/index_new2.php
again clicking on a announcement in the middle of the page is suppose to take you to the right video.

Thanks for helping I'll try your code above.

Posted: Wed, 2009-06-10 20:13 Blop

Test Page: http://willswonders.myip.org:8074/JessicaM.html?title=Chapter 4 min
(Only the title parameter is active.)

If you want the option of using the item or title, then you will have to use some logic to prioritize the use of item and title and make sure that a default is used if neither is set.

(Outdented code is for testing — remove it and uncomment the code for your site.)

<!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=ISO-8859-1" />
    <title>Writing Center-Podcasts</title>
    <style type="text/css">
      a:link {
        color: #0F467F;
        text-decoration: none;
      }
      a:visited {
        color: #4A6AA3;
        text-decoration: none;
      }
      a:hover {
        color: #333333;
        text-decoration: none;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        background-color: #576D93;
      }
      .img {
        float: right;
        padding-right: 20px;
        padding-top: 10px;
      }
      .style1 {
        color: #FFFFFF
      }
      .table {
        border: 2px solid #124888;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
    <script>
      var player   = null;
      var playlist = null;
      var playItem = null;
      var file     = null;
      var title    = null;
      if(!(playItem = swfobject.getQueryParamValue('item')))
      {
        //...default is third item (array counting starts at 0)
        //...default is null???
        //playItem = null;
playItem = 2;
      }
      if(!(file = swfobject.getQueryParamValue('playlist')))
      {
        // default playlist
        // IMPORTANT! - the player code must come after this so this file variable is used
        file = 'playlist_Howard.xml';
      }
      if(!(title = unescape(swfobject.getQueryParamValue('title'))))
      {
        // default title
        title = 'Chapter 3 min';
      }
alert('Play Item: ' + playItem + '\nFile: ' + file + '\nTitle: ' + title);
      function playerReady(obj)
      {
        player = document.getElementById(obj.id);
        playAway();
      };
      
      
      //...start the player on the query parameter item
      function playAway()
      {
        try
        {
          playlist = player.getPlaylist();
        }
        catch(e)
        {
          setTimeout("addListeners();", 100);
        }
        //...play the selected item
        //player.sendEvent('ITEM', playItem);
        //...play the selected title
        var counter = 0;
        for(var j in playlist)
        {
          if(title == playlist[j].title)
          {
            player.sendEvent('ITEM', counter);
          }
          counter++;
        }
        setTimeout("player.sendEvent('PLAY', 'true')", 200);
      };
    </script>
    <script>
      var flashvars =
      {
      //'file':                 'http://www.delmar.edu/engl/wrtctr/homepage_announcements/videos.xml',
'streamer':             'rtmp://willswonders.myip.org/oflaDemo',
'file':                  file,
        'displayclick':         'play',
        'shuffle':              'false',
        'repeat':               'true',
        'playlist':             'right',
        'playlistsize':         '250',
        'stretching':           'uniform',
        'autostart':            'false',
        'volume':               '60',
        'backcolor':            '333333',
        'frontcolor':           'FFFFFF',
        'lightcolor':           '3E91E8',
        'quality':              'true',
        'id':                   'playerId'
      };
      var params =
      {
        'allowfullscreen':      'true',
        'allowscriptaccess':    'always',
        'wmode':                'opaque',
        'bgcolor':              '#FFFFFF'
      };
      var attributes =
      {
        'id':                   'playerId',
        'name':                 'playerId'
      };
      
    //swfobject.embedSWF('http://www.delmar.edu/engl/wrtctr/homepage_announcements/player.swf', 'player', '640', '300', '9.0.115', false, flashvars, params, attributes);
swfobject.embedSWF('player-4.5.218.swf', 'player', '640', '300', '9.0.124', false, flashvars, params, attributes);
    </script>
  </head>
  <body>
    <table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="table">
      <tr>
        <td><div align="center"><img src="../images/swc_banner.jpg" alt="SWC banner" width="762" height="120" /></div></td>
      </tr>
      <tr>
        <td bgcolor="#CCCCCC" style="padding: 5px; border-top:1px solid #124989;"><a href="../index.php">Writing Center Homepage</a></td>
      </tr>
      <tr>
        <td align="center" style="padding: 5px;">
          <h1 align="left">Announcements</h1>
          <!-- keep this next line all on one line so the newlines don't cause an unwanted 5px margin below the player -->
          <div id="playercontainer" class="playercontainer" align="center"><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin to see this video.</a></div>
          <p> </p>
        </td>
      </tr>
      <tr>
        <td align="center" bgcolor="#7B9AC6" style="padding: 5px;">
          <p class="style1">
            Del Mar College - What's your dream?
            <br />
            101 Baldwin Blvd. Corpus Christi, TX 78404-3897
            <br />
            (361)698-1364
          </p>
          <p>
            <a href="mailto:writing@delmar.edu">writing@delmar.edu</a>
          </p>
        </td>
      </tr>
    </table>
    <p align="center">
      <img src="/cgi-bin/Count.cgi?df=wrctr_player.dat|dd=C|ft=0" width="58" height="16" align="absmiddle">
    </p>
  </body>
</html>

Posted: Wed, 2009-06-10 20:56 Jessica M.

That almost worked...it worked if once they clicked the announcement it take them to the player but it would play the first video but if they refreshed it played the correct video by title. What I did was add javascript for it to refresh once onload, so that it went to the correct title.

Was it doing that for you? I'm using a MAC I don't know if that makes a difference.

but I want to say THANK YOU!!!!! :)

Without you I've would have been stumped for days on end. So THANK YOU AGAIN! Your Awesome!

Posted: Wed, 2009-06-10 21:05 Blop

You shouldn't need the reload. I'll do some more testing — calling it from another page instead of just from a URI typed into the browser's address bar.

Posted: Wed, 2009-06-10 21:14 Jessica M.

Yeah...I'm going to test on a pc here in my house...then I'll post what's going on...it looks like firefox doesn't like the javascript reload to much...but I post with more info.

Posted: Wed, 2009-06-10 21:35 Jessica M.

I made the slight change you made and it works if I make a calling page like yours...I guess it doesn't work from the announcements slideshow...maybe it's interfering with it somehow...since I'm using the JW ImageRotator 3.16.

Posted: Wed, 2009-06-10 21:35 Blop

I'm using Windows XP.

Try it from this page: http://willswonders.myip.org:8074/callingpage.html

It did miss the indexing a couple of times. As much as I hate to use delays, a little more delay here seems to fix it.

setTimeout("player.sendEvent('PLAY', 'true')", 400);

It used to be that when you indexed the player, it jumped to the index and started playing that item, so you didn't have to use the PLAY Event. Now, the player jumps to the index, but doesn't start playing, so you have to use the PLAY Event to start it. The problem is that you don't know if the player is really ready to play the item yet. I could add lots more code to get the current item and if it is the same as the counter, then send the PLAY Event, otherwise, try again, but that's a lot of nonsense for a trivial task.

I also cleaned up the for loop — the counter wasn't really needed:

        //...play the selected title
        for(var j in playlist)
        {
          if(title == playlist[j].title)
          {
            player.sendEvent('ITEM', j);
          }
        }

For a production site, you will want to put all of the JavaScript code into a separate file, run it through the Yahoo minifier, and load it just like swfobject is loaded — from your site, of course.

Yahoo minifier: http://developer.yahoo.com/yui/compressor/

Not only will the code be compressed to load faster, the YUI Compressor will "tweak" it to run better.

Posted: Wed, 2009-06-10 22:00 Jessica M.

you know it works but what's weird is that it's like you must have had visited that page before like it's cached for it to always play the correct video. Because when I reset my browser clean it loads the first video, then when I go back to the calling page and click it again or another one, it plays the right one.

Posted: Wed, 2009-06-10 22:32 Blop

I see what you mean about linking from the Image Rotator; it always ends up playing the first track.

Try enabling the alert on the player page to see if the query parameter title is getting there.

alert('Play Item: ' + playItem + '\nFile: ' + file + '\nTitle: ' + title);

If it is, then trace it down until it is used in the if statement and finally, what index number is being sent to the player.

I'll have to setup a test page with an Image Rotator to figure out what is happening.

I see that even if I type this in the browser:http://www.delmar.edu/engl/wrtctr/homepage_announcements/index2.html?title=whateverit still goes to the first track, so somewhere, somehow, the title or the index j is getting lost.

This is quite odd, because my Image Rotator page works correctly.
http://willswonders.myip.org:8074/gwen.html

Posted: Fri, 2009-06-12 23:09 Jessica M.

I thought I'd update with what I"ve discovered. I'm using this coding . With a call of http://www.mysite.com/index2.html?item=20

and it works even if you wipe you cache...as long as you visit a site that has some type of flash content, it's like the browser has to have visited a page with flash to work which is no problem seeing how people visit sites everyday with flash. The above code just didn't work...I had to hard refresh the page and couldn't find a script to make the page refresh once. I tried a few it wasn't working well. So for now I"m using the below script, but I still need some help in using that script but reversing the playlist if the user just visits that player page with out a link to a specific item in the list.

if(!(playItem = swfobject.getQueryParamValue('item')))
{
// default is third item (array counting starts at 0)
playItem = 2;
}

if(!(file = swfobject.getQueryParamValue('playlist')))
{
// default playlist
file = 'irss2.xml';
}
//alert('Play Item: ' + playItem + '\nFile: ' + file);

function playerReady(obj)
{
player = document.getElementById(obj.id);
playAway();
};

// start the player on the query parameter item
function playAway()
{
if(player)
{
//alert('playAway:\nPlayer: ' + player.id + '\nplayAway - playItem:' + playItem);

setTimeout("player.sendEvent('ITEM', playItem)", 1000);
setTimeout("player.sendEvent('PLAY', 'true')", 4000);
}
else
{
setTimeout("playAway()", 200);
}
};
</script>

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

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

swfobject.embedSWF('player4_3.swf', 'player', '940', '500', '9.0.124', false, flashvars, params, attributes);
</script>

Linking by URL to playlist

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company