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

Forums

JW Player
/
JavaScript Interaction

How to Show "Now Playing" URL

35 replies [Last post]
Posted: Thu, 2009-02-05 11:34 JD
Anonymous's picture

Hi!

In previous version I had this javascript code:
var currentItem;

function getUpdate(typ,pr1,pr2,pid) {
if(typ == "item") { currentItem = pr1; setTimeout("getItemData(currentItem)",100); }
};

function getItemData(idx) {
var obj = thisMovie("flashid").itemData(idx);
video_url = obj["file"];
video_url = video_url.substring(0,42)
document.getElementById("nowplaying").innerHTML = 'Now Playing: <span>'+video_url+'</span>';
};

function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
  return window[movieName];
} else {
  return document[movieName];
}
};

However this is not working anymore with the new version.

Can someone please tell me what changes I need to make to get it working again?

Thank you very much!

Posted: Thu, 2009-02-05 14:06 lefTy  
lefTy's picture
    <script type="text/javascript">
      var player = null;

      function playerReady(obj)
      {
        player = gid(obj.id);
        player.addControllerListener('ITEM', 'itemMonitor');
      };

      function itemMonitor(obj)
      {
        gid('nowplaying') = 'Now Playing: <span>' + player.getPlaylist()[obj.index].file.substring(0,42) + '</span>'; 
      };

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

Posted: Thu, 2009-02-05 15:43 JD  
JD's picture

Thank you very much lefTy!!

I've just made a little change to the itemMonitor functions ( you probably forgot innerHTML ).

So now the functions are:

var player = null;

function playerReady(obj) {

    player = gid(obj.id);
    player.addControllerListener('ITEM', 'itemMonitor');

}

function itemMonitor(obj) {
   
    gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].file.substring(0,42) + '</span>';
   
}

function gid(name) {
   
    return document.getElementById(name);

}

It's working fine, but, do you know how can I print the first playlist item on page load, even before the user hits the play?

Many thanks in advance.

Posted: Thu, 2009-02-05 18:20 lefTy  
lefTy's picture

AH!, copy & paste fails again!

    <script type="text/javascript">
      var player = null;

      function playerReady(obj)
      {
        player = gid(obj.id);
        displayFirstItem();
      };

      function itemMonitor(obj)
      {
        gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].file.substring(0,42) + '</span>'; 
      };

<strong>
      function displayFirstItem()
      {
        if(player.getPlaylist())
        { 
          itemMonitor({index:0});
          player.addControllerListener('ITEM', 'itemMonitor');
        }
        else
        {
          setTimeout("displayFirstItem()",100);
        }
      };
</strong>

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

Posted: Thu, 2009-02-05 19:20 JD  
JD's picture

Thank you very much lefTy!!

Posted: Wed, 2009-02-11 04:09 marbo  
marbo's picture

how i can get video name what play now?

<script type="text/javascript">
var so = new SWFObject('mediaplayer/player.swf','mpl','550','600','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=http://gdata.youtube.com/feeds/api/playlists/<?php echo $genre; ?>?v=2&playlist=bottom&volume=15&repeat=list&shuffle=true&playlistsize=180&plugins=quickkeys-1<?php echo $soita; ?>');
so.write('player');
</script>
Posted: Wed, 2009-02-11 08:50 lefTy  
lefTy's picture

 
In the head element of your HTML document, place this code:

    <script type="text/javascript">
      var player = null;

      function playerReady(obj)
      {
        player = gid(obj.id);
        displayFirstItem();
      };

      function itemMonitor(obj)
      {
        gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].<strong>title</strong> + '</span>'; 
      };

      function displayFirstItem()
      {
        if(player.getPlaylist())
        { 
          itemMonitor({index:0});
          player.addControllerListener('ITEM', 'itemMonitor');
        }
        else
        {
          setTimeout("displayFirstItem()",100);
        }
      };

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

Change title to any other File Property that you want to get.

See:

      http://developer.longtailvideo.com/trac/wiki/FlashVars#Fileproperties

In the body element of your HTML document, place this code where you want the Title of the currently-playing selection to appear:

<div id="nowplaying">
</div>

Posted: Mon, 2009-02-16 02:33 marbo  
marbo's picture

thank u so mutch :)

Posted: Thu, 2009-02-19 17:49 Wordcutter  
Wordcutter's picture

cool but how do i change the font, size and color for the display Now Showing? i need it to fit my page style..

Posted: Thu, 2009-02-19 18:10 lefTy  
lefTy's picture

This is for a captions display, but it shows the general technique.

    <script type="text/css">
      div.nowplaying
      {
        position:                    absolute;
        top:                            123px;
        left:                           400px;
        width:                          415px;
        height:                          65px;
        padding:                          5px;
        font-size:                       20px;
        font-weight:                     bold;
        font-family:                    arial;
        color:                        #202020;
        border:             solid 1px #808080;
        background-color:             #FFFFC0;
      }
    </style>

And

<div id="nowplaying" class="nowplaying">
</div>

Posted: Thu, 2009-02-19 18:34 Wordcutter  
Wordcutter's picture

below is the html for my page... the url is http://mqmtelevision.com/ucover1.html I still dont understand how to get "Now Playing" down to 10 point arial.. :-(
----------------------start-------------------------
<html>

<head>

<title>MQM Television</title>

</head>
<body onLoad="createplayer('http://content.bitsontherun.com/feeds/VO0NcXIL.rss',true);" bgcolor="black" text="#999999" link="white" vlink="white" alink="white" font size="10" >

<script type="text/javascript">
var player = null;

function playerReady(obj)
{
player = gid(obj.id);
displayFirstItem();
};

function itemMonitor(obj)
{
gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].title + '</span>';
};

function displayFirstItem()
{
if(player.getPlaylist())
{
itemMonitor({index:0});
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("displayFirstItem()",100);
}
};

function gid(name)
{
return document.getElementById(name);
};
</script>
<script type="text/javascript" src="stmenu.js"></script>
<script type="text/javascript" src="jw/embed/swfobject.js"></script>
<script type="text/javascript">

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

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

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

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

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

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

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

<div align="left">
<table cellpadding="0" cellspacing="0" width="649">
<tr>
<td width="649" align="left" valign="top" height="23" colspan="3">
<div id="placeholder">
<p align="center"><a href="http://www.macromedia.com/go/getflashplayer">get the flash player</a> to see this player.</div> </td>
</tr>
<tr>
<td width="484" align="left" valign="top" height="41">
<p align="center">
<div id="nowplaying">
</div></td>
<td width="84" align="left" valign="top" height="41">
<p align="right"><!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub="wordcutter28"</script>
<a href="http://www.addthis.com/bookmark.php"
style="text-decoration:none;"
onclick="return addthis_open(this, 'email', '[URL]', '[TITLE]');" ><img src="http://mqmtelevision.com/emailonlygr.jpg" border="0" alt="Email" / width="63"></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END --></p>
</td>
<td width="81" align="left" valign="top" height="41">
<p align="left"><!-- ADDTHIS BUTTON BEGIN -->
<script type="text/javascript">
var addthis_pub = "YOUR-ACCOUNT-ID";
</script>

<a href="http://www.addthis.com/bookmark.php"
onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]');"
onmouseout="addthis_close();"
onclick="return addthis_sendto();"><img
src="http://mqmtelevision.com/shareonlygr.jpg"
border="0" alt="Share" / width="62"></a>

<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END --></p>
</td>
</tr>
</table>
</div>
<p>
</p>
</body>
</html>
------------------------------------end----------------------------------

Posted: Thu, 2009-02-19 18:41 Wordcutter  
Wordcutter's picture

I have been trying to use what you sent, and by the way, Thank You.. but it just crashes the page.. I must not be getting this correct..

Posted: Thu, 2009-02-19 20:38 lefTy  
lefTy's picture

In-line:<div id="nowplaying" style="font:normal normal normal 10pt arial">
Stylesheet:

<style type="text/css">
div#nowplaying
{
  font:  normal normal normal 10pt arial;
}
</style>

Posted: Thu, 2009-02-19 20:48 Wordcutter  
Wordcutter's picture

THANK YOU!!!! will try it right away...

Posted: Fri, 2009-02-20 00:11 Wordcutter  
Wordcutter's picture

IT works!!! Thank You.. now if I can figure out how to show the url of the video playing in an email form Im all set..:-) any ideas?

Posted: Fri, 2009-02-20 07:30 lefTy  
lefTy's picture

andersen has a demo with email here:

      http://home5.inet.tele.dk/nyboe/flash/mediaplayer/replay.htm

Posted: Fri, 2009-02-20 10:46 Wordcutter  
Wordcutter's picture

again kewl and ThankYOU...

Posted: Fri, 2009-02-20 11:27 Wordcutter  
Wordcutter's picture

yes.. this is good for a couple of videos.. but what about a playlist, as in the one we use? you can see from the code above we use an rss feed playlist from botr, so the videos names are not show within the code. is it possible to extract the video from the rss and email it?

Posted: Fri, 2009-02-20 12:39 lefTy  
lefTy's picture

 

"but what about a playlist, as in the one we use? you can see from the code above we use an rss feed playlist from botr, so the videos names are not show within the code. is it possible to extract the video from the rss and email it?"

andersen's code is extracting the video name from each playlist track. (Note that this is v3.x player API code.) You can update his code for the v4.x player API.

function getItemData(idx) {
var obj = thisMovie("thePlayerId").itemData(idx);
var tmp=obj["file"];

var subj="Video%20Link";
var theAdr='the@email.adr';
if(tmp!="") {
var theURL='<a href="'+tmp+'">download</a>    ';
var theMail='<a href=mailto:'+theAdr+'?subject='+subj+'&body='+tmp+'>eMail this</a>';
document.getElementById("theLink").innerHTML = theURL+theMail;
} else document.getElementById("theLink").innerHTML = "";
};

Posted: Fri, 2009-02-20 12:48 Wordcutter  
Wordcutter's picture

so what you are saying is replace this
---------------------------start-------------------------
function playerReady(obj)
{
player = gid(obj.id);
displayFirstItem();
};

function itemMonitor(obj)
{
gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].title + '</span>';
};

function displayFirstItem()
{
if(player.getPlaylist())
{
itemMonitor({index:0});
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("displayFirstItem()",100);
}
};

function gid(name)
{
return document.getElementById(name);
};
-----------------------------------end--------------------------------

with the code you have above or to I add it to it? then how do I link this to an email button on the page replacing the addthis one that is there already..

Posted: Fri, 2009-02-20 13:17 lefTy  
lefTy's picture

I'm working on it.

Sort of like this:

A) there is a button/link "email this media file",

B) the user clicks on the email this... link and a form input box appears asking for the email address,

C) after the user inputs the email address and clicks the "submit" button, the email is generated and sent.

OK???

Posted: Fri, 2009-02-20 13:24 Wordcutter  
Wordcutter's picture

right now, it emails the page complete.. problem is it sends the entire play list, not just the video that is playing.. so when someone gets the email, they get a link to the page including the player with the playlist showing, not the player showing the video someone wants them to look at. try it out you will see how it now works. which isnt what i am going for. does that explain it a little better?

Posted: Fri, 2009-02-20 13:30 lefTy  
lefTy's picture

So you want to email a link to the page with the particular video already selected in the player?

Then your page will need a bit of code to accept an item number.

Will your page always have the same playlist, with items in the same order, or do we need to load that data also?

Posted: Fri, 2009-02-20 13:40 Wordcutter  
Wordcutter's picture

right now there are 14 playlists.. go to http://mqmtelevision.com and click the guide.. take a look at the pull down menu.. each loads a player with its playlist into an iframe on the front page.. the email and share are on each of the pages.. ie.. http://mqmtelevision.com/wholly2.html or http://mqmtelevision.com/awards1.html you get the idea. the rss feed is called on that page and it is dynamic. As we upload files to our host, bitsontherun, a playlist is generated, ie the rss feed. you can just call it up here is the one for awards1.html http://content.bitsontherun.com/feeds/1GzYDgyM.rss The idea is to pass just the currently viewed video in the url with the player as if it was a single video in a player as opposed to a playlist in a player..

Posted: Fri, 2009-02-20 14:05 Wordcutter  
Wordcutter's picture

btw lefTy.. is there a lefTy mutual fund one can contribute to? let me know..

Posted: Fri, 2009-02-20 14:45 lefTy  
lefTy's picture

OK So you just need to pass the full URI for one video to your player page in the email.

Sure, lefTy's PayPal is at "wellitsme"

That's a gmail.com username.

Posted: Fri, 2009-02-20 14:48 Wordcutter  
Wordcutter's picture

yes from the currently being viewed video.. :-)

Posted: Fri, 2009-02-20 21:14 Wordcutter  
Wordcutter's picture

Is this possible, after looking at the rss feed? or will it require a complete new approach to the site?

Posted: Fri, 2009-02-20 23:46 lefTy  
lefTy's picture

The player has its own playlist object, we will use that.

Almost done...

Posted: Sat, 2009-02-21 09:51 Wordcutter  
Wordcutter's picture

ok :-)

Posted: Thu, 2009-04-30 15:15 Revata  
Revata's picture

Junior coder here. Is there a way to use a PHP value in place of the FileProperty that would change with each loading video? For instance where we have 'title' in this code:

<script type="text/javascript">
      var player = null;

      function playerReady(obj)
      {
        player = gid(obj.id);
        displayFirstItem();
      };

      function itemMonitor(obj)
      {
        gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].<strong>title</strong> + '</span>';
      };

      function displayFirstItem()
      {
        if(player.getPlaylist())
        {
          itemMonitor({index:0});
          player.addControllerListener('ITEM', 'itemMonitor');
        }
        else
        {
          setTimeout("displayFirstItem()",100);
        }
      };

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

Can you even inject PHP into JavaScript? I was thinking it might look something like this:

      function itemMonitor(obj)
      {
        gid('nowplaying').innerHTML = 'Now Playing: <?php echo $row_creditsList['description']; ?>';
      };

Where $row_creditsList is:

$currentPage = $_SERVER["PHP_SELF"];

$maxRows_creditsList = 8;
$pageNum_creditsList = 0;
if (isset($_GET['pageNum_creditsList'])) {
  $pageNum_creditsList = $_GET['pageNum_creditsList'];
}
$startRow_creditsList = $pageNum_creditsList * $maxRows_creditsList;

mysql_select_db($database_conSkye, $conSkye);
$query_creditsList = "SELECT title, `year`, `role`, playlink, weblink, description FROM credits ORDER BY `year` DESC";
$query_limit_creditsList = sprintf("%s LIMIT %d, %d", $query_creditsList, $startRow_creditsList, $maxRows_creditsList);
$creditsList = mysql_query($query_limit_creditsList, $conSkye) or die(mysql_error());
<strong>$row_creditsList</strong> = mysql_fetch_assoc($creditsList);

if (isset($_GET['totalRows_creditsList'])) {
  $totalRows_creditsList = $_GET['totalRows_creditsList'];
} else {
  $all_creditsList = mysql_query($query_creditsList);
  $totalRows_creditsList = mysql_num_rows($all_creditsList);
}
$totalPages_creditsList = ceil($totalRows_creditsList/$maxRows_creditsList)-1;

$queryString_creditsList = "";
if (!empty($_SERVER['QUERY_STRING'])) {
  $params = explode("&", $_SERVER['QUERY_STRING']);
  $newParams = array();
  foreach ($params as $param) {
    if (stristr($param, "pageNum_creditsList") == false &&
        stristr($param, "totalRows_creditsList") == false) {
      array_push($newParams, $param);
    }
  }
  if (count($newParams) != 0) {
    $queryString_creditsList = "&" . htmlentities(implode("&", $newParams));
  }
}
$queryString_creditsList = sprintf("&totalRows_creditsList=%d%s", $totalRows_creditsList, $queryString_creditsList);

however this only grabs the first item from the 'description' cell in my table, which doesnt change dynamically with each newly loaded video.

I think I could set it up so the php updated an xml playlist, but i was wondering if there's a way to do it this way since i've been using a playlist structure in php already.
I would greatly appreciate any insight into this, thanks.

Posted: Mon, 2009-06-01 11:54 Invisivel  
Invisivel's picture

Hi,
I'm trying to get the title of the video from a playlist but it's no working,

Here's my code:

<script type="text/javascript" src="http://www.violetadeoutono.com.br/swfobject.js"></script>

<div id='mediaspace'>This div will be replaced</div>

<script type='text/javascript'>
var s1 = new SWFObject('http://www.violetadeoutono.com.br/jwplayer.swf','ply','800','450','9','#');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file=http://www.violetadeoutono.com.br/playlist.php?CatNumber=<?php echo $row_master1invisivel_releases['CatNumber']; ?>&backcolor=000000&frontcolor=ffffff&playlistsize=213&playlist=right&repeat=list');
s1.write('mediaspace');
</script>

Does anyone knows what I'm doing wrong?

Thanks

Posted: Mon, 2009-06-01 12:18 ANWS  
ANWS's picture

Assuming your PHP is good (obviously, I can't check it):

    <script type="text/javascript">
      var s1 = new SWFObject('http://www.violetadeoutono.com.br/jwplayer.swf', 'ply', '800', '450', '9.0.124');
          s1.addParam('allowscriptaccess',   'always');
          s1.addParam('allowfullscreen',     'true');
          s1.addParam('wmode',               'opaque');
          s1.addVariable('file',              encodeURIComponent('http://www.violetadeoutono.com.br/playlist.php?CatNumber=<?php echo $row_master1invisivel_releases['CatNumber']; ?>'));
          s1.addVariable('playlist',         'right');
          s1.addVariable('playlistsize',     '213');
          s1.addVariable('repeat',           'list');
          s1.addVariable('backcolor',        '000000');
          s1.addVariable('frontcolor',       'FFFFFF');
          s1.write('mediaspace');
    </script>

Posted: Mon, 2009-06-01 13:53 Invisivel  
Invisivel's picture

Thanks a lot ANWS,
It worked!

The only strange thing that is happening is that "Now Playing" appears and disappears in a ramdon way.

I put the script on the head space and the div in the body as suggested above by lefTy

here's my test page:
http://www.violetadeoutono.com.br/invisivel_tv.php
click on any item

Thanks again...

Posted: Mon, 2009-06-01 15:00 Invisivel  
Invisivel's picture

Again,

When I open on Internet Explorer I get this error message:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.jeroenwijering.player::View/getPlaylist()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at flash.external::ExternalInterface$/_callIn()
at <anonymous>()
at flash.external::ExternalInterface$/_evalJS()
at flash.external::ExternalInterface$/call()
at com.jeroenwijering.player::View/playerReadyPing()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at SetIntervalTimer/onTimer()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

Does it helps?

Posted: Tue, 2009-06-02 15:17 Invisivel  
Invisivel's picture

Hi again,

I noticed that this error happens due to the delay with the MySql database, probably the php script process the data after the javascript.

How can I solve this?

  • Locked