Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

How to add a link at the end of the video!


Hey guys I'm pretty new to this but would really appreciate if someone could tell me how I would be able to ad a link to a check out page at the end of my video.

Any help would be appreciated!

17 Community Answers

JW Player

User  
0 rated :

Do you want the link to be automatic?

The video finishes your checkout page is loaded.

Do you want the viewer to be presented with a link to your checkout page when the video finishes? Where do you want the link to appear?

The viewer can then choose to click on the link.

The more detail that you can supply, the easier it will be to offer you some help.

JW Player

User  
0 rated :

Hi,

I would like the same thing. I believe what he is looking for and what im looking for are similar. I did not want to create to another threads right at the top for the same issue so im posting here. What i need (and i believe the op is looking for also) is for the video to automatically display a link to another page when the video completes or is paused, preferably right in the middle, that the viewer can choose to click on.

Where i differ from the op is that I would like to be able to load an small banner image with the link right in the middle of the video when it is finished, making it more clickable. So in all im looking for a solution to display a clickable image linked to another page. I believe the answer should help both me and the op. The closest i got to finding the answer is in this thread http://www.longtailvideo.com/support/forum/JavaScript-Interaction/19090/Links-at-beginning-different-link-at-end-#msg128374.

I was able to get the link to display but not my own image, please help with this i greatly appreciate it.

JW Player

User  
0 rated :


The v5 player no longer supports the displayclick functionality.

To display an image overlaid on the displayarea after the video completes playing:

1) use the JavaScript API to monitor the player's state,

2) when the state is reported as COMPLETED, display a clickable image overlaid on the displayarea.

Code for v4 & v5 players. Tweak the CSS to display the player and image sized & positioned where you want them. Adjust the filepaths and filenames for the video, image, and player to yours.
bc.. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<htmllang="en">

<head>

<title>SimpleOverlaidImageLinkOnCOMPLETED-JWMPv4.7.x-swfobjectv2.2</title>

<styletype="text/css">
img.overlay
{
position:absolute;
top:150px;
left:300px;
width:500px;
height:281px;
visibility:hidden;
cursor:pointer;
z-index:1;
}

div.playercontainer
{
position:absolute;
top:150px;
left:300px;
width:500px;
height:301px;
z-index:0;
}
</style>

<scriptsrc="http://www.google.com/jsapi"></script>

<script>google.load('swfobject','2.2');</script>

<scripttype="text/javascript">
varflashvars=
{
'file':'/video.flv',
'stretching':'uniform',
'frontcolor':'86C29D',//text&icons
'backcolor':'003367',//playlistbackground
'lightcolor':'C286BA',//selectedtext/trackhighlight
'screencolor':'FFFFFF',//screenbackground
'id':'playerID',
'autostart':'true'
};

varparams=
{
'allowfullscreen':'true',
'allowscriptaccess':'always',
'wmode':'opaque',
'bgcolor':'#FFFFFF'
};

varattributes=
{
'id':'playerID',
'name':'playerID'
};

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

<scripttype="text/javascript">
varplayer=null;
varplaylist=null;


functionplayerReady(obj)
{
player=gid(obj.id);
addListeners();
};


functionaddListeners()
{
playlist=player.getPlaylist();

if(playlist.length>0)
{
player.addModelListener('STATE','stateMonitor');
}
else
{
setTimeout("addListeners();",100);
}
};


functionstateMonitor(obj)
{
if(obj.newstate=='COMPLETED')
{
gid('overlay').style.visibility='visible';
}
};


functiongid(name)
{
returndocument.getElementById(name);
};
</script>

</head>

<body>

<divid="playercontainer"class="playercontainer"><aid="player"class="player"href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">GettheFlashPlugintoseethisvideo.</a></div>
<imgid="overlay"class="overlay"src="image01.jpg"onclick="window.location='http://www.google.com/'"/>

</body>

</html>



JW Player

User  
0 rated :

Hi

Thank You! I think i got it, but i did forget to mention that im using wordpress so should i do anything additional to make this work? Basically I should add all code in between the <head></head> tags in the wordpress header file between the same same tags. Then, for instance on the single post page i should add the code thats in between the <body></body> tags. then i should be able to simply change the filepaths and filenames video, image, and player.

Let me know if i got it right i try it out too! Thanks

JW Player

User  
0 rated :


I use the wordTube plugin for Wordpress, so I don't know how to manually integrate this code in Wordpress.

JW Player

User  
0 rated :

Thanks guys yeah like Antonio wrote i need the link to appear as soon as the video has come to an end.

I would like the link to be centered and the middle of the video.

Thank for your help guys!

JW Player

User  
0 rated :

I am looking for the code to display a link at the end of a video for flash player 5.

I have posted an example of what I am trying to achieve here:

http://renatogtr.com/example.html

I also need to display 3-6 players within the same page. Any help getting this done would be much appreciated.

Thank you for your help!

JW Player

User  
0 rated :


@Johnny,

The code for displaying a link upon completion is posted above. It's been tested in the v4 & v5 players the JSAPI hasn't changed from v4 to v5. The link in the code is a clickable image, but it can be any other clickable HTML element, such as an anchor element, a button, a div with text & images, etc.

For displaying multiple players < 5 or so... just make sure that each has a unique name/id and if you are using swfobject to embed your Flash content, make sure that your HTML target elements have unique ids.

There are many, many examples of multiple players if you use the search box on this Forum.

If you get stuck, post a link to your Test Page for help.

JW Player

User  
0 rated :

Jimmy,

Ok, I have 2 videos on this page:

http://renatogtr.com/MediaPlayer/test3/test-player3.html

I have separated the CSS & Java code in separate css and js files ( you can see what I am talking about if you view the source code.)

I got the picture and the link to work for one video but I am having trouble setting up multiple videos on the same page. I think its a CSS Problem

I know I am doing something wrong I just don't know what it is (noob here).

Any help to get this setup properly would be awesome.

Thanks in advance for your time!

Here is my code below:

bc.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>Simple Overlaid Image Link On COMPLETED - JWMP v4.7.x - swfobject v2.2</title>


<link href="test-player3.css" rel="stylesheet" type="text/css">
<link href="test-player4.css" rel="stylesheet" type="text/css">

<script src="http://www.google.com/jsapi"></script>
<script>google.load('swfobject', '2.2');</script>

<!-- VIDEO PLAYER 3 -->
<script src="test-player3.js"></script>
<script src="test-player3-part2.js"></script>
<!-- END VIDEO PLAYER 3 -->

<!-- VIDEO PLAYER 4 -->
<script src="test-player4.js"></script>
<script src="test-player4-part2.js"></script>
<!-- END VIDEO PLAYER 4 -->
</head>

<body>


<!-- VIDEO PLAYER 3 -->
<table width="609" height="500" border="0" align="center" cellspacing="0">
<tr>
<td align="center"> 

<div id="playercontainer3" class="playercontainer3"><a id="player3" class="player3" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin to see this video.</a></div>
<img id="overlay3" class="overlay3" src="preview3.jpg" onclick="window.location='http://www.longtailvideo.com/support/forum'" />

</td>
</tr>
</table>
<!-- END VIDEO PLAYER 3 -->

<!-- VIDEO PLAYER 4 -->
<table width="609" height="500" border="0" align="center" cellspacing="0">
<tr>
<td align="center"> 

<div id="playercontainer4" class="playercontainer4"><a id="player4" class="player4" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin to see this video.</a></div>
<img id="overlay4" class="overlay4" src="preview4.jpg" onclick="window.location='http://www.longtailvideo.com/support/forum'" />

</td>
</tr>
</table>
<!-- END VIDEO PLAYER 4 -->




</body>

</html>

JW Player

User  
0 rated :

Oh,

I forgot to mention. I don't want then video to play on load, instead I would like to display a picture on load with a play button.

Can I do that?

JW Player

User  
0 rated :

The player's behavior on instantiation is controlled by the *autostart* flashvar:bc.. 'autostart':'true'




Use the *image* flashvar to display a preview image when the player is stopped:bc.. 'image':'http://www.domain.com/path/image.jpg'




Please review the v5 player supported flashvars here:
*http://developer.longtailvideo.com/trac/wiki/Player5FlashVars*

You should style and position the players with CSS targeted at the playercontainers, instead of using tables.
(Tomorrow is the start of 2010! Tables are kind of '90s!)

During development, it's a lot easier to keep the CSS & JavaScript in the HTML document. (It would also save me having to chase down 6 files before I can look at your code!)

*_But most importantly, it might become obvious that you have multiple JavaScript functions with the same name won't work!_*

Once everything is working, you can pull the CSS & JavaScript out of the HTML document, run it through the Yahoo Minifier, and load it from external files.

Anyway, I've chased down the 6 files and will post the corrected code later...

Fullyfunctional,testedcode.TweaktheCSStoposition&styletheplayers.bc.. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<htmllang="en">

<!--From:http://www.longtailvideo.com/support/forum/General-Chat/21607/How-to-add-a-link-at-the-end-of-the-video-#msg142345-->
<!--From:http://renatogtr.com/MediaPlayer/test3/test-player3.html-->

<head>

<title>SimpleOverlaidImageLinkOnCOMPLETED-JWMPv4.7.x-swfobjectv2.2</title>

<!--
<linkhref="http://renatogtr.com/MediaPlayer/test3/test-player3.css"rel="stylesheet"type="text/css">
<linkhref="http://renatogtr.com/MediaPlayer/test3/test-player4.css"rel="stylesheet"type="text/css">
-->

<styletype="text/css">
img.overlay3
{
position:absolute;
top:500px;
left:200px;
width:608px;
height:370px;
visibility:hidden;
cursor:pointer;
z-index:1;
}

div.playercontainer3
{
position:absolute;
top:500px;
left:200px;
width:608px;
height:370px;
z-index:0;
}

img.overlay4
{
position:absolute;
top:0;
left:200px;
width:608px;
height:370px;
visibility:hidden;
cursor:pointer;
z-index:1;
}

div.playercontainer4
{
position:absolute;
top:0;
left:200px;
width:608px;
height:370px;
z-index:0;
}
</style>

<scriptsrc="http://www.google.com/jsapi"></script>
<script>google.load('swfobject','2.2');</script>

<!--VIDEOPLAYER3-->
<!--
<scriptsrc="http://renatogtr.com/MediaPlayer/test3/test-player3.js"></script>
<scriptsrc="http://renatogtr.com/MediaPlayer/test3/test-player3-part2.js"></script>
-->
<!--ENDVIDEOPLAYER3-->

<!--VIDEOPLAYER4-->
<!--
<scriptsrc="http://renatogtr.com/MediaPlayer/test3/test-player4.js"></script>
<scriptsrc="http://renatogtr.com/MediaPlayer/test3/test-player4-part2.js"></script>
-->
<!--ENDVIDEOPLAYER4-->

<scripttype="text/javascript">
varflashvars3=
{
'file':'video3.flv',
'stretching':'uniform',
'frontcolor':'86C29D',//text&icons
'backcolor':'003367',//playlistbackground
'lightcolor':'C286BA',//selectedtext/trackhighlight
'screencolor':'FFFFFF',//screenbackground
'playerready':'playerReady3',
'id':'player3',
'autostart':'true'
};

varparams3=
{
'allowfullscreen':'true',
'allowscriptaccess':'always',
'wmode':'opaque',
'bgcolor':'#FFFFFF'
};

varattributes3=
{
'id':'player3',
'name':'player3'
};

swfobject.embedSWF('player.swf','player3','608','370','9.0.124',false,flashvars3,params3,attributes3);

varflashvars4=
{
'file':'video4.flv',
'stretching':'uniform',
'frontcolor':'86C29D',//text&icons
'backcolor':'003367',//playlistbackground
'lightcolor':'C286BA',//selectedtext/trackhighlight
'screencolor':'FFFFFF',//screenbackground
'playerready':'playerReady4',
'id':'player4',
'autostart':'true'
};

varparams4=
{
'allowfullscreen':'true',
'allowscriptaccess':'always',
'wmode':'opaque',
'bgcolor':'#FFFFFF'
};

varattributes4=
{
'id':'player4',
'name':'player4'
};

swfobject.embedSWF('player.swf','player4','608','370','9.0.124',false,flashvars4,params4,attributes4);

varplayer3=null;
varplayer4=null;
varplaylist3=null;
varplaylist4=null;


functionplayerReady3(obj)
{
player3=gid(obj.id);
addListeners(player3);
};


functionplayerReady4(obj)
{
player4=gid(obj.id);
addListeners(player4);
};


functionaddListeners(obj)
{
playlist=obj.getPlaylist();

if(playlist.length>0)
{
obj.addModelListener('STATE','stateMonitor');
}
else
{
setTimeout("addListeners();",100);
}
};


functionstateMonitor(obj)
{
if(obj.newstate=='COMPLETED')
{
switch(obj.id)
{
case'player3':
gid('overlay3').style.visibility='visible';
break;
case'player4':
gid('overlay4').style.visibility='visible';
break;
default:
break;
}
}
};


functiongid(name)
{
returndocument.getElementById(name);
};
</script>

</head>

<body>

<!--VIDEOPLAYER3-->
<divid="playercontainer3"class="playercontainer3"><aid="player3"class="player3"href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">GettheFlashPlugintoseethisvideo.</a></div>
<imgid="overlay3"class="overlay3"src="preview3.jpg"onclick="window.location='http://www.longtailvideo.com/support/forum'"/>
<!--ENDVIDEOPLAYER3-->

<!--VIDEOPLAYER4-->
<divid="playercontainer4"class="playercontainer4"><aid="player4"class="player4"href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">GettheFlashPlugintoseethisvideo.</a></div>
<imgid="overlay4"class="overlay4"src="preview4.jpg"onclick="window.location='http://www.longtailvideo.com/support/forum'"/>
<!--ENDVIDEOPLAYER4-->

</body>

</html>



Andrew

JW Player Support Agent  
0 rated :

Hi Johnny,

I used the code you posted earlier for displaying an image after the video has finished, and it all works fine on Internet Explorer, but no joy with Firefox. It doesn’t seem to want to change the status of the div from to hidden to visible..

Any ideas?

Cheers!

JW Player

User  
0 rated :

@Andrew,

If you post a link to your Test Page, someone may be able to help you. Guessing isn't useful in diagnosing issues.

JW Player

User  
0 rated :

http://supermoney.blogcu.com/

JW Player

User  
0 rated :

hello,

can anyone tell me how to implement juliette's solution (above) for adding a clickable overlay image at the end of the video when adding the code in the middle of the page - for example i am using:

bc.. <video src="video.flv" height="355" id="container" width="702"></video>
<script type="text/javascript">
jwplayer("container").setup({
autostart: true,
controlbar: "none",
volume: 80,
stretching: "fill",
flashplayer: "player.swf"
});</script>


if anyone could past the correct code based on what i already have above that would be great.

i'm just not sure how to reference the javascript functions, css and overlay image in the above context.

thank you!

JW Player

User  
0 rated :

nevermind, i found a similar solution and tried to post a solution to the above but it wasn't working - maybe later!

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you post a link to where it is not working?

This question has received the maximum number of answers.