How to Show "Now Playing" URL

Posted: Thu, 2009-02-05 15:06 lefTy

    <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 16:43 JD

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 19:20 lefTy

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 20:20 JD

Thank you very much lefTy!!

Posted: Wed, 2009-02-11 05:09 marbo

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 09:50 lefTy

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 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 03:33 marbo

thank u so mutch :)

Posted: Thu, 2009-02-19 18:49 Wordcutter

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 19:10 lefTy

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 19:34 Wordcutter

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" >

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">
<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>
</p>
</td>
<td width="81" align="left" valign="top" height="41">
<p align="left">
<script type="text/javascript">
var addthis_pub = "YOUR-ACCOUNT-ID";
</script>

Posted: Thu, 2009-02-19 19:41 Wordcutter

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 21:38 lefTy

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 21:48 Wordcutter

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

Posted: Fri, 2009-02-20 01:11 Wordcutter

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 08:30 lefTy

andersen has a demo with email here:

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

Posted: Fri, 2009-02-20 11:46 Wordcutter

again kewl and ThankYOU...

Posted: Fri, 2009-02-20 12:27 Wordcutter

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 13:39 lefTy

"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 13:48 Wordcutter

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 14:17 lefTy

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 14:24 Wordcutter

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 14:30 lefTy

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 14:40 Wordcutter

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 15:05 Wordcutter

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

Posted: Fri, 2009-02-20 15:45 lefTy

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 15:48 Wordcutter

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

Posted: Fri, 2009-02-20 22:14 Wordcutter

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

Posted: Sat, 2009-02-21 00:46 lefTy

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

Almost done...

Posted: Sat, 2009-02-21 10:51 Wordcutter

ok :-)

Posted: Thu, 2009-04-30 16:15 Revata

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 12:54 Invisivel

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

Here's my code:

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

Does anyone knows what I'm doing wrong?

Thanks

Posted: Mon, 2009-06-01 13:18 ANWS

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 14:53 Invisivel

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 16:00 Invisivel

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 16:17 Invisivel

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?

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company