CODEWITHSUNDEEP
javascriptjquerywordpressvimeofroogaloop
d4rklit3
d4rklit3

Reputation: 427

Trouble with controlling Vimeo iframes with jquery, froogaloog and wordpress

I have been working on a friends site trying to fix up his implementation of flexslider so that if a vimeo video is playing and the user switches to another slide it will pause that video. I am having issues with using froogaloop and jquery in this context. Here is some code I have been trying:

(function () { jQuery('.flexslider').flexslider({
        slideshowSpeed: slideshowDelay+"000",  
        directionNav: false,                    
        animation: "fade" , 
        after: function (slider)
        {
            console.log("next");
            var currentSlide = slider.currentSlide;
            var slides = slider.slides;

            jQuery(slides).each( function (i) 
            {
                if(i != currentSlide)
                {
                    var slide = jQuery(slides[i]);
                    jQuery(slide).attr({class : 'slide_selector'})
                    var vimeo = jQuery('.slide_selector iframe');
                    if(vimeo.length !== 0)
                    {

                        var src = jQuery(vimeo).attr('src')
                        var controlObject = {"method" : "pause" }; 
                        var domWindow = vimeo[0].contentWindow;
                        jQuery(vimeo[0]).bind('ready' , function 
                        {
                            console.log("PlayerId: "+ player_id)
                            froogaLoop(player_id).api('pause');
                        });
                    }
                }
            })                                  
        }
    });
    showProject(projectSlug);
});)

So this has not worked in any way. I read that I was supposed to use an init function in the Froogaloop framework but running Froogaloop.fn.init (only way to reach it) told me that nothing I put into it had a getAttributes property. This has all been rather confusing. I think my main question is how do i initialize these iframes with froogaloop?

note. I replaced $f with froogaLoop in my version of the library since $ seems to interfere with wordpress.

Upvotes: 2

Views: 1238

Answers (1)

manishie
manishie

Reputation: 5322

I see a few problems here.

(Although it's not shown, I'm assuming that you're correctly including the froogaloop js file, otherwise you wouldn't have seen the getAttributes error.)

I'm going to show you a code snippet which I just did for my site that works, which you can incorporate into your own code.

Here is the relevant html from my site which loads the vimeo player:

<iframe id="vvq-62-vimeo-1" src="http://player.vimeo.com/video/50138878?title=1&byline=1&portrait=0&fullscreen=1&api=1"></iframe>

The first thing to note is that you must add &api=1 to the src in order to activate the api.

Once you've done that, this standard jQuery will get you the iframe:

iframe =jQuery('#vvq-62-vimeo-1')[0];

This will init the froogaloop player:

player = $f(iframe);

If you test this in a console, then at this point you should see:

e.fn.e.init

Then you can run any of the api commands, for example this command to play the video:

player.api('play');

FYI, the getAttributes error appears when you try to run the froogaloop api on an invalid object. Looking at your code above, it's not clear where player_id is getting set, so perhaps that's the problem.

mkm

Upvotes: 1

Related Questions