AnythingSlider: Using JW Player

[BobJHuckleberry]

Hello and thanks in advance for your time and help.

I’m using AnythingSlider with video and using JW Player.

Here’s my test site:

http://testsitefree.nfshost.com/

I put JW Player into it’s own folder and put the following code in to each panel.

This text will be replaced

All is working ok but if I’m playing a video and I move to another video panel, the initial video keeps playing.

How do I make videos stop playing when a panel is changed?

I did this before I saw the directions on GitHub for AnythingSlider / JW Player, so I going to try this solution.

I’m ok with parts 1 and 2.

Parts 3 + 4: Where do I put this code?

1. Put JW Player javascript in the head of your document.

2. Set up the video containers in the slider

3. Define the flash player url, a list of videos you want to add and set them up

// Make a list of videos first

// ***********************

var flashplayer = "jwplayer/player.swf",

videos = [];



// add videos as follows: videos.push([ id, file, image, height, width ]);

videos.push([

"container1",

"http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",

"http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",

300,

200

]);



// using the same video for demo purposes ( because I'm lazy :P )

videos.push([

"container2",

"http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",

"http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg",

300,

200

]);



ect ect ...................................................................

4. Set up AnythingSlider using this code:

// Set up AnythingSlider

$('#slider').anythingSlider({

// pause all videos when changing slides

onSlideInit: function(e, slider) {

if (jwplayer) {

$.each(videos, function(i) {

jwplayer(i).pause(true);

});

}

},

// Only play a paused video when a slide comes into view

onSlideComplete: function(slider) {

if (jwplayer) {

$.each(videos, function(i, v) {

// find ID in panel - if there are two videos in the same panel, both will start playing!

if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'PAUSED') {

jwplayer(v[0]).play();

}

});

}

},



ect ect ..............................................

thanks

[Mottie]

Don’t use that first bit of code (initializing the player inside each panel), because it won’t be set up properly.

Check out this demo that I set up using videos from your demo site. It uses the same code you shared above from the video wiki documentation.

[BobJHuckleberry]

Thanks for the reply Mottie.

Just not sure on a couple of things.

Where do I put the JS code from jsFiddle.
Do I put it in a new js file and link to it in the html header?
Do I put it in query.anythingslider or jquery.anythingslider.video?

I notice in the jsFiddle example jquery.anythingslider , jquery.anythingslider.video , jquery.min are not used, so I don’t need to use these anymore?

thanks again.

[Mottie]

Hiya!

Replace the existing javascript with the code from the demo. jsFiddle does include those files, they are just listed under the “Manage Resources” section on the left.

Also ALL code listed in the jsFiddle needs to be wrapped in a document ready function and placed in the page head section:

You actually shouldn’t need the jquery.anythingslider.video.js file at all unless you decide to add YouTube, Vimeo or HTML5 video.

[BobJHuckleberry]

Thanks Mottie,

I have everything working except the video doesn’t pause when I change panel!

I’m using the exact same files as the jsFiddle example and the same js except for the file paths.

thanks again

TestSite

')

[Mottie]

It looks like this bit of code needs to be removed:

// DOM Ready

$(function(){

$('#slider').anythingSlider({

resizeContents      : true,

addWmodeToObject    : 'transparent',

navigationFormatter : function(index, panel){ // Format navigation labels with text

return [index - 1];

}

});

});

The reason is that if you try to initialize AnythingSlider a second time (the one with all the jw code), all the options get ignored, because it’s already running. So just remove, or move those options into the second copy.

[Mottie]

Oh, in case you want to see the code with both combined, here it goes

')

[BobJHuckleberry]

Have it working now!

Thanks very much for all your help Mottie, you’ve saved me a great deal of time.

[ineluki]

Hi

I’m having the same problem as Bob above..Using Anythingslider combined with JWplayer..
Im using this implementation of jwplayer:

Laddar film...

And then:

It the recommended embedding methot from JW..
I dont really understand how I can change the implementation to // videos.push([ id, file, image, height, width ]); ?

[Mottie]

There is a code example above:

// videos.push([ id, file, image, height, width ]);

videos.push([ "container1", "video/video1.mp4", "images/preview.jpg", 700, 390 ]);

so from your code, it would be:

videos.push([ 'jwplayer_film_tag_player', 'http://youtu.be/hP9Lmo0Az7Q', '', 392, 980 ]);

[ppardo]

My problem is that firebug thows the following error:
TypeError: jwplayer(…).setup is not a function
width: v[4],
I’ve tried everything, even downgrade jwplayer jscript but the nly thing i’ve got is 48 h. of work lost…..

Desperatly need help, this is my code:

')

[ppardo]

I forgot to tell that i’m using the last jwplayer version 6.1

Regards

[Mottie]

Hi @ppardo!

Are you sure that jwplayer is loaded on the page? What I mean is I see the script tag in the code above, but what I want to know is what do you see when you type in `jwplayer` into the firebug console?

[ppardo]

Hi Mottie;

It seems to be, apparently…. cause when I type jwplayer in, it returns function()

[ppardo]

Hi Mottie;

I don’t know how to say it, cause i feel very ashamed right now; the thing is that I asked plugin to write content to ‘container1’ while the name of the container is ‘container’, I’m sorry to waste your time(and mine as well – 26hours).

Thanks very much for your help, I appreciate very much; your code works like a charm (when a twat like me uses it correctly).

[Author]

Posts