How do I add a URL link in the Player at the end?

Posted: Sat, 2007-11-03 04:12 Will

Reply

If you had a playlist with two tracks (or more if you have other videos) the first one being your video, the second one being an image with your text "Let Me Try", then when the video is finished, the image would start "playing".

Then the user could click on the image and go to the other page.

The following flashvars will be needed:

so.addVariable('file', 'playlist.xml')
so.addVariable('repeat', list'); // so the player advances to the next track
so.addVariable('shuffle', 'false'); // so the playlist doesn't get shuffled
so.addVariable('linkfromdisplay', 'true');
so.addvariable('linktarget', '_self');
so.addVariable('rotatetime', '99'); // so the player deosn't rotate to the next item on the playlist too soon.
so.addVariable('enablejs', 'true'); // JavaScript so the magic happens
so.addVariable('javascriptid', 'mpl');

Then a little JavaScript to stop the player and open the new window:

function newPage(url)
{
sendEvent('stop');
window.open(url, 'LetMeTry');
}

The track with the image needs to have an <info> element for the link.

<track>
<creator>Jeremy</creator>
<location>LetMeTry.jpg</location>
<info><![CDATA[javascript:newPage('LetMeTry-2.html');]]></info>
</track>

Getting back will be handled in the new window with a "Close This Window" image.

Since this gets a little complicated, I made two sample windows, two sample playlists, and two sample images for each (one jpg & one png). Get it here: [url=http://willswonders.myip.org:8085/downloads/LetMeTry.zip]LetMeTry.zip[/url]

Demo: [url=http://willswonders.myip.org:8085/php/LetMeTry-1.html]Let Me Try[/url]

Posted: Sat, 2007-11-03 20:50 jKerr

Reply

Will, you're awesome,

not only do you provide clean code that illustrates exactly what I'm trying to accomplish, you also build a demo page 'and' provide me with a .zip so that i can work with the source.

I've seen this from a lot of the members here, and I must say, next to Jeroen's amazing player, the support offered from other members in these forums is the next best thing about returning here ..

at other sites where i am a member (i can think of one Open Source LMS site as one good example) i actually got reprimanded for asking too many questions, and was expected to be able to learn on my own about a poorly documented and implemented Learning Management portal, and I was never able to figure out how to do what I required.

So, it's a real breath of fresh air to start building a site with a cool tool like the JW Media Player and then have so many people around to provide the best ideas and expertise when you get stuck.

Top notch. All of you.

I'll post a link once I'm a bit further along, and the commercial license is a pittance in terms of how much i actually owe ..

keep up the good work (you too Jeroen!) .. i'm looking forward to all the new versions .. i live and breathe multi-media content creation, and i'm glad there's a community like this one to build and support such awesome tools.

-jeremy

Posted: Sat, 2007-11-03 21:44 Will

Reply

@jeremy,

We all thank you for the nice compliments.

I was originally inspired by the quality of Jeroen's work and his attitude.

Next to that, it's the users, like yourself, who challenge me EVERY day to do the almost impossible.

I'm glad to hear that the code was useful to you. I think all anyone here would ever ask of you is that you contribute whatever you can, whenever you can. Even another challenge is a contribution. ;)

As an example, writing the code for you was an inspiration for me to make the New Playlist from Playlist demo in this thread. [url=http://www.jeroenwijering.com/?thread=7628]tag in rss.xml to call another rss.xml ?[/url], so consider yourself to already be a contributor. :)

Posted: Sun, 2007-11-04 14:17 vaibhav

Reply

Posted: Tue, 2007-11-06 20:50 jKerr

Reply

Hey Will,

I'm making great progress with this, but i'm a bit stuck again.

I've had to modify some of your code because i have to embed the player as an object instead of with java script. The reason for this is that i've found a pretty slick drop down menu to put at the top of my page which uses java script. unfortunately, since the javascript owns that entire portion of the page, the menu items do not appear above the player.

so, i had to embed the player instead so that i could use the wmode=transparent option to get the proper behaviour with my menu.

in doing so, i must have broken one or two things from your original code in the process.

i'm still working on my demo page, but you can find it here:

www.parkingkarma.ca/flash-player/mediaplayer.html

and, here's the code i'm using:

<html>

<head>

<STYLE TYPE="text/css">
.indent {margin-left:200px}
</STYLE>
<script type='text/javascript' src='quickmenu.js'></script>

function thisMovie(movieName)

{

if(navigator.appName.indexOf("Microsoft") != -1)

{

return window[movieName];

}

else

{

return document[movieName];

}

};

function sendEvent(typ, prm)

{

thisMovie('mpl').sendEvent(typ, prm);

};

function newPage(url)

{

sendEvent('stop');

window.open(url, 'LetMeTry');

};

</script>

</head>

<body>

-----SNIP -CODE FOR DROP DOWN MENU REMOVED FOR SIMPLICITY-

<div class="indent"><object width="900" height="600"

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/

shockwave/cabs/flash/swflash.cab#version=8,0,0,0">

type="application/x-shockwave-flash" pluginspage=

"http://www.macromedia.com/go/getflashplayer" />

</object>

</div>

</body>

</html>

PLAYLIST.XML

<?xml version="1.0" encoding="utf-8"?>

<track>

<title>Installing and Using InteleViewer</title>

<creator>Intelerad Medical Systems</creator>

<location>training001.swf</location>

</track>

<location>LetMeTry.jpg</location>

</track>

</trackList>

</playlist>

the "try-me" page i'm trying to link to is here:

www.parkingkarma.ca/flash-player/try-me/tryme.html

---------------

please let me know what you can see ...

i'm continuing to troubleshoot, so that page will likely be updating over the next few days

(i'm also trying to figure out why my captions won't appear - they used to, but i seem to have broken that too .., but one problem at a time ;-)

cheers,

-jeremy

Posted: Tue, 2007-11-06 22:30 Will

Reply

@jeremy,

It's quite unfortunate that you have chosen to use the object/embed method. I never used it much, so I can't be of much help. I think you have chosen to give up a good method of embedding the JW Player for a menu.

I can tell you that you have badly mixed up parameters and flashvars.

This is my best attempt at helping you to strighten them out. Sorry, I don't know more. :s

<!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>
  <!-- http://www.parkingkarma.ca/flash-player/mediaplayer.html -->
  <title>jeremy - Let Me Try</Title>
  
  <link rel='stylesheet' type='text/css' href='css/intelerad.css'/>
  <style type="text/css">
    .indent {margin-left:200px}
  </style>
  <script type='text/javascript' src='quickmenu.js'></script>
  <script type="text/javascript" src="swfobject.js"></script>
  <script type='text/javascript'>
    function thisMovie(movieName)
    {
      if(navigator.appName.indexOf("Microsoft") != -1)
      {
        return window[movieName];
      }
      else
      {
        return document[movieName];
      }
    };
    function sendEvent(typ, prm)
    {
      thisMovie('mpl').sendEvent(typ, prm);
    };
    function newPage(url)
    {
      sendEvent('stop');
      window.open(url, 'LetMeTry');
    };
  </script>
</head>
<body>
<body bgcolor="#CCCCCC">
  <!-- SNIP - CODE FOR DROP DOWN MENU REMOVED FOR SIMPLICITY -->
  <div>
    <br>
  </div> 
  <div class="indent">
    <object width="900" height="600" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="mpl">
      <param name="movie"              value="mediaplayer.swf" />
      <param name="wmode"              value="transparent" />
      <param name="quality"            value="best">
      <param name="bgcolor"            value="#000000">
      <param name="allowfullscreen"    value="true">
      <param name="swliveconnect"      value="true">
      <param name="allowscriptaccess"  value="sameDomain">
      <param name="flashvars"          value="file=playlist_jeremy-1.xml&width=900&height=600&displaywidth=640&overstretch=true&thumbsinplaylist=true&shuffle=false&linkfromdisplay=true&linktarget=www.parkingkarma.ca&enablejs=true&javascriptid=mpl" />
      <embed src="mediaplayer.swf"     width="900" height="600" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" thumbsinplaylist="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="mpl"
                                   flashvars="file=playlist_jeremy-1.xml&width=900&height=600&displaywidth=640&overstretch=true&thumbsinplaylist=true&shuffle=false&linkfromdisplay=true&linktarget=www.parkingkarma.ca&enablejs=true&javascriptid=mpl" />
    </object>
  </div>
</body>
</html>
<!--
<object>             <embed>
width                width
height               height
classid              ------
codebase             ------
--------             pluginspage
id                   name
movie                src
type                 
quality              quality
allowfullscreen      allowfullscreen
swliveconnect        swliveconnect
allowscriptaccess    allowscriptaccess
*********
flashvars
*********
file
width
height
displaywidth
displayheight
overstretch
thumbsinplaylist
shuffle
linkfromdisplay
linktarget
enablejs
javascriptid
*********
flashvars
*********
-->

Posted: Wed, 2007-11-07 10:12 jkerr

Reply

@ Will,

You said:

"I think you have chosen to give up a good method of embedding the JW Player for a menu."

Yep, you're right on the money. I have determined, as you suggested, that I lose more than I gain by doing this. I've decided to go back to java script. Now, everything is working as advertised.

One question for you. You suggested using:

so.addVariable('rotatetime', '99'); // so the player deosn't rotate to the next item on the playlist too soon.

Is there a way to instead have the Try Me jpg to pause at the first frame, instead of playing through for the rotatetime duration? Or does the repeat-list parameter mean that the movie will have to play automatically?

Thanks again for your help.

-jeremy

Posted: Wed, 2007-11-07 11:14 andersen

Reply

from the [url=http://www.jeroenwijering.com/extras/readme.html]readme[/url]:
[i]repeat (true,false,list): By default, the players will stop playback after every item to preserve bandwidth (repeat=false). You can set this to "list" to playback all items in a playlist once, or to "true" to continously playback your song/movie/playlist. [/i]

so what you could maybe do is to set repeat and autostart = false and start the player from javascript and stop it again after some time using the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm]javascript api[/url] (linked from the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]demopage[/url])

Posted: Wed, 2007-11-07 13:38 Will

Reply

@jeremy,

Excellent decision! I don't like to tell others what to do, I just point out the gain/loss.

Anyway, as andersen said, you can control the player's behavior (stop/pause/play, etc.) with JS or set the rotatetime to 99999999999999999, which effectively pauses it almost forever (only for the image, video/audio will play for its full length).

Or maybe you want a sightly different behavior; it's not entirely clear what sequence/behavior you want. Anything is possible —— please clarify. :)

Posted: Thu, 2007-11-08 12:33 jkerr

Reply

@ Andersen & Will,

Hey guys,

I've thought about my desired behaviour, so let me clarify how I would like all of this to work together:

First, some definitions:

Training Video: a swf that will be loaded via a playlist into the Media Player

TryMe link: a single-frame JPG that links to a unique URL for each Training video, using the technique provided by Will at the top of this thread.

TryMe URL: a 'unique' URL that loads an Adobe Captivate presentation (swf that does "not" play in the media player. - in other words, the TryMe link is pointing to a different page that does not have the player, or any playlists.)

So, on my main page, i'll load a play list that would look like this:

Training Video 1
TryMe link 1
Training Video 2
TryMe link 2
Training Video 3
TryMe link 3
... etc ..

And the behaviour i would like is:

- Load player, but do not autoplay Training Video1. Wait for user to start video.

- Automatically go to TryMe link 1.

- Stop loading TryMe link 1, so that the user has an infinite amount of time to click it and go to the TryMe URL.

- After viewing the movie on the TryMe URL, navigate back to the main playlist page.

- User will manually start Training Video 2.

- Automatically load TryMe link 2

cycle, rinse, wash .. repeat ..

does this make any sense?

can you guys suggest a better method?

my test site is still here:

http://www.parkingkarma.ca/flash-player/mediaplayer.html

So, my guess is that the rotatetime option won't really work for me, because depending on how much time they spend in the TryMe link URL, the playlist on the mainpage may start playing without them.

I have added;

to my main html, but i'm not clear on where to execute the "stop" script, since i'm loading a single jpeg from a playlist.

i'm probably making this way more complicated than it needs to be, but hey, i figure this will be a fun puzzle for you guys ..

i hope this clarifies what i'm trying to accomplish .. if you can suggest a better workflow, i'm all ears.

I still need to troubleshoot captions, but i'll focus on this issue first.

thanks!

-jeremy

Posted: Fri, 2007-11-09 01:48 Will

Reply

@jeremy,

The code I gave you does execute a stop when the user clicks on the image to go to the other page.

    function newPage(url)
    {
      <strong>sendEvent('stop');</strong>
      window.open(url, 'LetMeTry');
    };

If you think the user is going to stare at the image longer before clicking, just add more 9s to the rotate time.

so.addVariable('rotatetime', '<strong>9999999999999999999999999999999999999999</strong>'); // so the player deosn't rotate to the next item on the playlist too soon.

Posted: Thu, 2008-03-13 07:12 www.it2sms.com

Reply

high quality website to send bulk sms world wid flat rate from 0.015

Posted: Fri, 2008-03-21 09:44 laura

Reply

Will, can you provide the LetmeTry.zip file again. The link you used previously does not work. I would also appreciate a link to your demo of this. Much appreciated!

Posted: Fri, 2008-03-21 10:52 TryMe

Reply

Links are good — try again...

Posted: Mon, 2008-03-24 11:11 laura

Reply

Clicking the links returns a page not found error. I tried putting the url in directly and same results.

Posted: Mon, 2008-03-24 11:39 monty

Reply

Demo: [url=http://willswonders.myip.org:8085/php/LetMeTry-1.html]LetMeTry[/url]

Files: [url=http://willswonders.myip.org:8085/downloads/LetMeTry.zip]LetMeTry.zip[/url]

Both good! (Some bizarre DNS server problem?)

Posted: Tue, 2008-12-30 04:14 Neelima

Reply

I want to provide the a dispaly link at the end of the video , but I am not using the playlist. Is there any way to provide this functionality without the use of playlist or using a single file.

Posted: Tue, 2008-12-30 20:09 andersen

Reply

@Neelima

you can use the javasript api - http://www.longtailvideo.com/support/tutorials/Javascript-API-Examples

and monitor the player state, to see when it is "COMPLETED"
for example code see - http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_4-3-2-0.html

please note the examples use swfobject v.2.1 - http://code.google.com/p/swfobject/

Posted: Wed, 2010-03-24 11:39 webber

Reply

http://www.samedaycompany.co.uk/FA-cup-competition1.php
www.joannaakrofi.co.uk
www.lucidica.com It support yehhhhhh

Posted: Thu, 2010-07-22 14:35 mw

Reply

Does anyone still have the example files for testing?

Posted: Thu, 2010-07-22 15:18 Ethan LongTail

Reply

You can't do a link inside the player at the end, but you could use some JavaScript to detect the time that the player has, and when it reaches the end of the video, it can display a link underneath the player.

Example:

<html>
<head>
<title>JW Player</title>
<script type="text/javascript" src="swfobject2.js"></script>
<script type="text/javascript">
var currentPosition = 0; 
var player = null;
function playerReady(thePlayer) {
	player = window.document[thePlayer.id];
	addListeners();
}
function addListeners() {
	if (player) { 
		player.addModelListener("TIME", "positionListener");
	} else {
		setTimeout("addListeners()",100);
	}
}
function positionListener(obj) { 
	currentPosition = obj.position; 
	var tmp = document.getElementById("theLink");
	//if (tmp) { tmp.innerHTML = "position: " + currentPosition; }
	if (currentPosition == "60.0"){
		tmp.style.display = "inherit";
	}
}
function createPlayer() {
	var flashvars = {
		file:"http://content.longtailvideo.com/videos/flvplayer.flv", 
		autostart:"true",
	}
	var params = {
		allowfullscreen:"true", 
		allowscriptaccess:"always"
	}
	var attributes = {
		id:"player1",  
		name:"player1"
	}
	swfobject.embedSWF("player.swf", "placeholder1", "320", "196", "9.0.115", false, flashvars, params, attributes);
}
</script>
</head>
<body onload="createPlayer()">
<div id="placeholder1">
</div>
<br>
<div id="theLink" style="display:none;"><a href="http://www.example.com" target="blank">Click Here!</a></div>
</body>
</html>

Posted: Thu, 2010-07-22 18:19 mw

Reply

Thanks Ethan, I'll give that a try. I can't use the link under the player for this purpose because I don't have any room under the player.

Does the clickable image no longer work?

Posted: Thu, 2010-07-22 18:28 Ethan LongTail

Reply

Np.

What do you mean by clickable image?

Posted: Thu, 2011-04-21 05:49 Stefan

Reply

I guess what he meant was those layers you can interact with/click on (like the annotations on YouTube.com).

Is that somehow possible for the JWPlayer?

Posted: Thu, 2011-04-21 15:01 Ethan LongTail

Reply

That is not possible, unless you write your own plugin to do so.

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company