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

19 posts | return to the Feature Suggestions forum | get the rss feed for this thread

Nov. 02, 2007jkerr

Hi all,

I'm currently building a prototype for training content, using the JW media player.

I'm building 2 learning components. The first is a flash movie that students will watch to learn about a feature or concept.

The second component is a software simulation that will let the student try the software as if they actually had it installed (Adobe Captivate presentation)

This second component will be on its own URL because i can not display it through the JW Media player (at least, i don't think that is possible)

So, what I would like to do is have a training video displayed in the player.

At the last frame, I want to have a single image with the text "Let Me Try".

If the student clicks in the player window, over that text, i want them to jump to the URL that contains the software simulation.

Is this possible?

Can someone suggest a good way to manage this linking so that it's easy (and elegant) to get back to the JW Player to keep watching more training movies?

many thanks in advance,

-jeremy

Nov. 03, 2007Will

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]

Nov. 03, 2007jKerr

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

Nov. 03, 2007Will

@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.

Nov. 04, 2007vaibhav

Nov. 06, 2007jKerr

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>

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

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

<param name="movie" value="mediaplayer.swf" />

<param name="file" value="playlist.xml" />

<param name="displaywidth" value="640" />

<param name="mpl" value="mediaplayer.swf" />

<param name="thumbsinplaylist" value="true" />

<param name="wmode" value="transparent" />



<embed src="mediaplayer.swf" mpl="mediaplayer.swf" width="900" height="600" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=playlist.xml&width=900&height=600&displaywidth=640&overstretch=true&thumbsinplaylist=true&shuffle=false&linkfromdisplay=true&linktarget=www.parkingkarma.ca wmode="transparent" thumbsinplaylist="true"

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

<playlist version="1" xmlns="http://xspf.org/ns/0/">

<trackList>


<track>

<title>Installing and Using InteleViewer</title>

<creator>Intelerad Medical Systems</creator>

<location>training001.swf</location>

<image>ip_wp_1024x768.jpg</image>

<link rel="captions">training001.dfxp.xml</link>

</track>

<track> <!-- Link Image -->

<creator>Let Me Try</creator>

<title>Let Me Try</title>

<location>LetMeTry.jpg</location>

<info><![CDATA[javascript:newPage('try-me/tryme.html');]]></info>

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

Nov. 06, 2007Will

@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.


<!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
*********

-->


Nov. 07, 2007jkerr

@ 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

Nov. 07, 2007andersen

from the [url=http://www.jeroenwijering.com/extras/readme.html]readme[/url]:
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.

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])

Nov. 07, 2007Will

@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.

Nov. 08, 2007jkerr

@ 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;

<script type='text/javascript'>
function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
</script>

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

Nov. 09, 2007Will

@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)
{
sendEvent('stop');
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', '9999999999999999999999999999999999999999'); // so the player deosn't rotate to the next item on the playlist too soon.


Mar. 13, 2008www.it2sms.com

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

Mar. 21, 2008laura

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!

Mar. 21, 2008TryMe

Links are good — try again...

Mar. 24, 2008laura

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

Mar. 24, 2008monty

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?)

Dec. 30, 2008Neelima

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.

Dec. 30, 2008andersen

@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/

Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit