Grow your CSS skills. Land your dream job.

AnythingSlider: Using JW Player

  • # April 15, 2012 at 2:14 pm

    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

    # April 15, 2012 at 2:48 pm

    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.

    # April 15, 2012 at 4:24 pm

    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.

    # April 15, 2012 at 6:49 pm

    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.

    # April 15, 2012 at 8:36 pm

    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

    < !DOCTYPE html>








    ')



































    # April 15, 2012 at 9:54 pm

    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.

    # April 15, 2012 at 10:00 pm

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

    < !DOCTYPE html>








    ')
































    # April 15, 2012 at 10:07 pm

    Have it working now!

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

    # May 22, 2012 at 5:08 am

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

    # May 22, 2012 at 1:28 pm

    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 ]);
    # December 19, 2012 at 7:05 pm

    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:


    ')




    # December 19, 2012 at 7:06 pm

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

    Regards

    # December 20, 2012 at 2:05 am

    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?

    # December 20, 2012 at 3:03 am

    Hi Mottie;

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

    # December 20, 2012 at 5:17 am

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".