Adding button/link next to the replay ic...

Adding button/link next to the replay icon.

JW Player — Apr 17, 2014 12:33PM EDT

Hi,

I'm wondering if there is a way to include a custom button next to the replay icon in the video player after a video has finished playing. I would like to be able to include a link that when clicked on, will take the user to another page of my website.

I have seen that Ethan showed how to do an automatic redirect(http://www.longtailvideo.com/support/forums/jw-player/using-playlists/11658/redirect-to-page-of-next-video-link-instead-of-playing-the-vi/), but I would like it to be something that the user has to click on to proceed to the next video instead of automatically redirecting.

Is this possible with JWPlayer?

8 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent

Apr 17, 2014 12:33PM EDT -1 rated :

What about something like this?

http://www.jwplayer.com/blog/call-to-action-with-jw-player/

Up Down

JW Player

User

Apr 17, 2014 12:33PM EDT 0 rated :

Perfect. You are the freaking man Ethan.

Up Down

JW Player

User

Apr 17, 2014 12:33PM EDT 0 rated :

Ok... I'm not sure what I'm doing wrong... but I can't get it to work with my setup. When I include the source code from the example, my video player never loads.

Here is my code. (I just copied what you had for the call to action and haven't edited any of it yet.)
bc.. <script type='text/javascript'>
jwplayer('playerKZEvBrUvROTk').setup({
file: 'http://videos.bravegirlsclub.com/soulrestoration/lesson1/introduction.mp4',
image: 'http://videos.bravegirlsclub.com/soulrestoration/lesson1/introduction.png',
sources: [
{ file: 'http://videos.bravegirlsclub.com/soulrestoration/lesson1/introduction.mp4', label: 'SD' },
{ file: 'http://videos.bravegirlsclub.com/soulrestoration/lesson1/hd/introduction.mp4', label: 'HD' },
],
title: 'Lesson 1 Intro',
width: '100%',
aspectratio: '16:9',
skin: 'roundster',
sharing: '{}'
});

jwplayer().onComplete(function() {
var el = document.createElement("div");
var el2 = document.createElement("div");
var el3 = document.createElement("div");
var el4 = document.createElement("div");
var txt = document.createElement('a');
if (jwplayer().getRenderingMode() == "html5"){
var theBody = document.getElementById(player.id);
} else {
var theBody = document.getElementById(player.id+"_wrapper");
}
var playerWidthPX2 = theBody.style.width;
var playerWidthPX = parseFloat(playerWidthPX2);
var playerHeightPX2 = theBody.style.height;
var playerHeightPX = parseFloat(playerHeightPX2);
el3.setAttribute('id', 'bg');
el3.style.height = playerHeightPX + "px";
el3.style.width = playerWidthPX2;
el3.style.background = "#333333";
el3.style.opacity = "0.70";
el3.style.position = "absolute";
el3.style.backgroundImage="url('background.png')";
el.setAttribute('src', 'background.png');
if (jwplayer().getRenderingMode() == "html5"){
} else {
el3.style.top = playerHeightPX-playerHeightPX+"px";
}
el3.style.zIndex = "999";
el3.width = playerWidthPX;
el3.height = playerHeightPX;
el2.setAttribute('id', 'bg2');
el2.style.height = playerHeightPX + "px";
el2.style.width = playerWidthPX2;
el2.style.position = "absolute";
el2.style.zIndex = "999";
el2.width = playerWidthPX;
el2.height = playerHeightPX;
theBody.appendChild(el3);
theBody.appendChild(el2);
el2.style.textAlign = "center";
el2.style.left = ((playerWidthPX*2)/6) -"5" + "px";
el2.style.top = ((playerHeightPX*3)/6) -"30" + "px";
el.setAttribute('id', 'hyperlink');
el.style.height = "30px";
el.style.width = "30px";
el2.width = "30";
el2.height = "30";
el.style.position = "relative";
el.setAttribute('frameBorder', '0');
el.style.top = "11px";
el.style.left = "202px";
el.style.textAlign = "center";
el.style.marginBottom = "-16px";
el.style.marginRight = "8px";
var message = 'Did you like the Trailer?<br />Then <u>see the full movie!</u>';
txt.innerHTML = message;
txt.href = "http://www.youtube.com/watch?v=TEgQM6ZhkWg";
txt.target = "_blank";
txt.style.textDecoration = "none";
txt.style.outline = "0";
txt.style.MozUserSelect = 'none';
txt.style.KhtmlUserSelect = 'none';
txt.style.WebkitUserSelect = 'none';
txt.style.OUserSelect = 'none';
txt.style.UserSelect = 'none';
txt.style.fontSize = "18px";
txt.style.color = "#ffffff"
txt.style.position = "absolute";
txt.style.marginLeft = "6px";
txt.style.marginTop = "4px";
txt.style.fontFamily = "arial,_sans";
txt.setAttribute('id', 'txt');
el4.setAttribute('id', 'replay');
el4.style.height = "20px";
el4.style.width = "20px";
el4.height = "20";
el4.width = "20";
el4.style.position = "absolute";
el4.style.top = "-" + playerHeightPX/2 + "px";
el4.style.marginTop = "50px";
el4.style.left = playerWidthPX/2 + "px";
el4.style.marginLeft = "50px";
el4.style.backgroundImage="url('replay.png')";
el4.setAttribute('src', 'replay.png');
el2.appendChild(txt);
el2.appendChild(el);
el2.appendChild(el4);
el.style.backgroundImage="url('hyperlink.png')";
el.setAttribute('src', 'hyperlink.png');
el.style.cursor = "pointer";
el.style.display = "table";
el2.style.display = "table";
el3.style.display = "table";
el4.style.display = "table";
txt.style.display = "table";
el.onmouseup = function(){
window.open("http://www.youtube.com/watch?v=TEgQM6ZhkWg");
}
el4.style.cursor = "pointer";
el4.onmouseup = function(){
el.style.display = "none";
el2.style.display = "none";
el3.style.display = "none";
el4.style.display = "none";
txt.style.display = "none";
jwplayer().play();
}
});

</script>

Up Down

Ethan Feldman

JW Player Support Agent

Apr 17, 2014 12:33PM EDT -1 rated :

Can I see where this is running?

Up Down

JW Player

User

Apr 17, 2014 12:33PM EDT 0 rated :

You bet.

http://my.bravegirlsclub.com/soul-restoration/lesson-1/introduction/

Up Down

Ethan Feldman

JW Player Support Agent

Apr 17, 2014 12:33PM EDT -1 rated :

SyntaxError: syntax error
http://my.bravegirlsclub.com/soul-restoration/lesson-1/introduction/
Line 143

You have <p> and </p> tags in your <script> source, making the player not work.

Up Down

JW Player

User

Apr 17, 2014 12:33PM EDT -1 rated :

Sure enough... that wasn't showing up in my editor but was in the source code. I think I have that part sorted now but the call to action is still not showing at the end. It kind of flashes on the screen, but the replay button overwrites it. Here is a screenshot of what I'm talking about, but you can probably see the same thing if you visit the page again.

http://screencast.com/t/HpTeFs6F

I've tried changing back to the default skin, but that didn't change anything.

Up Down

Ethan Feldman

JW Player Support Agent

Apr 17, 2014 12:43PM EDT -1 rated :

Hm, yeah. Can you test with a different theme? Maybe something is clashing here.

This question has received the maximum number of answers.