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

A couple of JWPlayer coding questions

I am trying to switch from JWPlayer 5 playing flv videos to JWPlayer 6 playing mp4 videos. I have a test page (http://www.chef-de-race.com/video/classic_preps/2015_copy(1)/2015_classic_prep_videos.htm) that seems to work very well. There are just a couple of issues. In the version 5 page I had a placeholder image that displayed before and after each video was played. I can't successfully add a placeholder image in version 6. Can I do that? Also, the videos in version 6 are running sequentially without a pause whereas they didn't in version 5. How do I get the player to stop after each video selected from the playlist ends?

This is the current relevant coding. Are there lines I can add to address these two issues? Thanks.

<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
playlist: [
{
file: "/video/classic_preps/2015_copy(1)/150119 - Smarty Jones Stakes_x264.mp4",
title: "2015 SMARTY JONES STAKES, JAN. 19, OP",
description: "1ST: FAR RIGHT, 2ND: BAYERD, 3RD: MR. Z<br />1 MILE, DIRT, FST, 1:38.43; MARGINS: 1 3/4, 1/2"
},
{
file: "/video/classic_preps/2015_copy(1)/150117 - Pepsi Cola Stakes (R)_x264.mp4",
title: "2015 PEPSI COLA STAKES (R), JAN. 17, SUN",
description: "1ST: SOUTHERN FIRE, 2ND: LUX, 3RD: LIBERTY LOVER<br />6 FURLONGS, DIRT, FST, 1:09.88; MARGINS: 3 1/2, NECK"
},
{
file: "/video/classic_preps/2015_copy(1)/150117 - LeComte Stakes (G3)_x264.mp4",
title: "2015 LECOMTE STAKES-G3, JAN. 17, FG",
description: "1ST: INTERNATIONAL STAR, 2ND: WAR STORY, 3RD: TIZNOW R J<br />1 MILE & 70 YARDS, DIRT, FST, 1:43.62; MARGINS: 2 1/2, HEAD"
},
{
file: "/video/classic_preps/2015_copy(1)/150117 - Groovy Stakes (R)_x264.mp4",
title: "2015 GROOVY STAKES (R), JAN. 17, HOU",
description: "1ST: A M MILKY WAY, 2ND: SUPERMASON, 3RD: MY NEPHEW ANDREW<br />6 FURLONGS, DIRT, FST, 1:11.05; MARGINS: 1 1/4, 1 1/4"
},
{
file: "/video/classic_preps/2015_copy(1)/150117 - California Derby_x264.mp4",
title: "2015 CALIFORNIA DERBY, JAN. 17, GG",
description: "1ST: CROSS THE LINE, 2ND: SOUL DRIVER, 3RD: STAND AND SALUTE<br />1 1/16TH MILES, AWS, FST, 1:44.79; MARGINS: 1 3/4, NECK"
},
{
file: "/video/classic_preps/2015_copy(1)/150110 - Sham Stakes (G3)_x264.mp4",
title: "2015 SHAM STAKES-G3, JAN. 10, SA",
description: "1ST: CALCULATOR, 2ND: ROCK SHANDY, 3RD: PIONEEROF THE WEST<br />1 MILE, DIRT, FST, 1:34.88; MARGINS: 4 1/4, 4 1/4"
}
],
height: 600,
width: 575,
listbar: {
position: "bottom",
size: 300
}
});
</script>

13 Community Answers

Up Down

Andrew

JW Player Support Agent  
0 rated :

You will need to add an image: ‘image.jpg’ line in order to use an image with the player. Also, you can use our API to pause after a video completes or before the next starts, depending on preference. (Using something like jwplayer().onComplete or jwplayer().onPlaylistItem() )

Up Down

sar130

User  
0 rated :

I had already tried to add the image file near the end (as shown below) but the image still does not appear in the player. It's the same image I used successfully for version 5. Should I be placing the image tag somewhere else?

.
.
.
],
image: "/video/classic_preps/2015_copy(1)/race_video_intro.jpg",
displaytitle: "false",
height: 600,
width: 575,
listbar: {
position: "bottom",
size: 300
}
});
</script>

Up Down

MisterNeutron

User  
0 rated :

Some simple demos, all with preview images: http://misterneutron.com/

The configuration guide: http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference

Up Down

sar130

User  
0 rated :

I think I did it right but the problem is that the player still has a black background and the thumbnails are now black as well instead of showing the JWPlayer logo as they did before I added the image tag to each video selection. The image tag was added between the title and description tags for each video.

Up Down

MisterNeutron

User  
0 rated :

Your test page is still not showing the "image" attribute. Please give us a link to a page that you believe is coded correctly.

Up Down

sar130

User  
0 rated :

The version 5 page that shows the image on the player and pauses after each video is http://www.chef-de-race.com/video/classic_preps/2015)/2015_classic_prep_videos.htm

The version 6 latest test update is http://www.chef-de-race.com/video/classic_preps/2015_copy(1)/2015_classic_prep_videos.htm

Up Down

MisterNeutron

User  
0 rated :

Hmmm... Everything looks right. The files are where they need to be (including the preview image), and the coding looks correct. But no preview image, and doing some DOM poking around, the background image simply isn't being picked up by the dynamic CSS. Color me puzzled....

A longshot, but do you have hotlink protection enabled on your server?

Up Down

sar130

User  
0 rated :

I checked my web host account and hotlink protection is disabled. Actually, I can live without the background image (although I prefer it) and, if I remove the image tags, the JWPlayer logo thumbnails are kind of cool. A solution still would be nice.

The bigger issue at the moment for me is the correct coding and placement of the API to make the videos stop after being played rather than automatically going on to the next video.

Up Down

jherrieven

User  
1 rated :

@sar130

Remove the brackets "()" in the image URLS.

The JW Player innards is assigning the image to the background using CSS as follows:

background-image:url(<image_url>);

Therefore the (1) included in the URL will be closing this assignment off prematurely.

James Herrieven

Up Down

MisterNeutron

User  
0 rated :

Good catch, James!

The JW innards should be wrapping that URL in quotes, to avoid this kind of error. Parentheses in a file name are perfectly legal, and not the least bit unusual. That's standard Windows "versioning," in fact.

Up Down

sar130

User  
0 rated :

Thanks, James. Perfect.

Up Down

sar130

User  
0 rated :

Andrew,

I saw a brief reference to the same issue of stopping between videos on a playlist where the poster wrote that onComplete() didn't work for him but that onBeforeComplete() did. There were no details of the actual coding. Ideally I would like each video to stop at the end and the have the player return to an idle state with the background image showing just as it does when opening the page.

Up Down

Andrew

JW Player Support Agent  
0 rated :

So essentially, you would like to have a playlist that stopped between items and displayed a poster image between content?

I’m not certain that this can be used with our built-in playlist functionality, but you could certainly do something with an HTML playlist akin to:
http://support.jwplayer.com/customer/portal/articles/1480872-example-creating-an-html-playlist

This would require a bit of additional work to progress the playlist (IE adding some potential API work to load the next item in an array) but this would likely be the best way to implement.

This question has received the maximum number of answers.