API events not working

[bravokiloecho]

Hello,

I've been enjoying this plugin very much however I've been having a little trouble getting the API events to work.

In short, using:

$('#video').on('finish',function () {
    console.log('finished');
});

doesn't work (ie, nothing gets logged).

I'm using the latest version (0.9.3 from three days ago).

I can't see what I might be doing wrong but happy to be corrected!

Any help much appreciated!

ben

[jrue]

Hi, thanks for the feedback. I could not reproduce this. Which browser are you using? Also, this plugin cannon be run with the file:/// protocol, you need to have a local webserver setup, or run it on a live server. Please verify this. Also the #video maches the id of the iframe embed, correct?

[bravokiloecho]

Thanks for getting back to me.

I'm using Chrome v41.0.2272.89 (64-bit) on a Mac and running the site through a local MAMP setup.

The exact use of the plugin looks like this...

var $video = $('#video-id');

$video.vimeo('play');

$video.on('pause',function () {
    console.log('pause');
});

The play method works fine so I assume I'm selecting the iframe correctly. It's just that none of the events - I've tried them all - get triggered. Strange...

[jrue]

Sorry, I couldn't reproduce this issue. I've had numerous students use this without issue, so I'm assuming that it might be something unique to your setup. If you do find a bug in the code, please let me know and I'm happy to try to fix it.

The only other thing I can think of is that there might be a syntax error, or a conflict with another plugin. Since this Vimeo plugin adds events, it is possible another plugin might have similar event names attached to iframes. Sorry, only thing I can think of.

[tjalil]

Having the same issue with events. The methods and calls work fine, but none of the events seem to fire.

[jrue]

Hi @tjalil Can you provide any additional information? Perhaps some code snippets?

Vimeo requires https now. Not sure if this was a recent change, but I updated the plugin to reflect that. Perhaps this is the issue? Are you working off a live server?

[joshuapease]

I'm having a similar issues as well. I can call the api methods ( play, pause, etc ). However, none of the event listeners are working for me.

I'm developing the site on a local MAMP Pro installation. However, even if I publish the site to one of our testing server, I'm still not getting any event calls.

I am creating the vimeo <iframe> dynamically. This function accepts a vimeo ID and creates the proper vimeo player url. For this example ( and my own testing ) I used the vimeo player URL from your readme.

Everything loads & autoplays plays just fine. However, I'm not getting any event calls for "finish" or "playProgress"

function playVimeoId(id) {
    console.log('playVimeoId');
    // Clone iframe template & set src
    $videoIframe = $vimeoIframeTemplate.clone();
    $videoIframe.attr('src', 'https://player.vimeo.com/video/77889659?api=1&player_id=vid1' );
    $videoPlayerContainer.append( $videoIframe );

    $videoIframe.load(function() {
        $videoIframe.vimeo("play"); // This method works fine 
        $videoIframe.on("finish", onFinish);

        $videoIframe.on("playProgress", function(event, data){
            console.log( data );
        });
    });

    function onFinish() {
        console.log('video is finished');
    }
}

[jrue]

The only thing I can think of is the timing of when you're dynamically adding the videos in. The way Vimeo works is as soon as a video is loaded and ready, it starts receiving messages directly from Vimeo.com on the window object. jQuery's load() function only means the iframe is loaded, not that the Vimeo video is actually ready.

Try adding this:

$(window).on("message", function(e){

    console.log(e); //see the events come in from Vimeo. The first should be a ready signaling the video is ready

    if( e.event == "ready"){
        //load videos
    }

}

[ondrejrohon]

I have same issue, I'm adding embeds with js and on iframe load binding vimeo events. I tried to bind those events after 10 second setTimeout and it still doesn't work. So I guess it won't be a problem with timing? Anybody some ideas?

I'm using MeteorJS setup.

Thanks guys.

[jrue]

Thanks for checking this out. It appears I'll need to take a closer look at this. I'm out of town for a conference, so it might be until next week when I can add an update.

Generally, the workflow is that the plugin collects messages sent from Vimeo to the window object (detected in jQuery by $(window).on("message", function(e){}) then it checks to see if the message was indeed from Vimeo, and if the message indicates the video is loaded (through e.event). When the video is ready, we can apply API commands to it.

It appears that dynamically loading a video might not trigger these, or the timing is off. If anything, I might have to add a new method to be called for dynamically loaded videos.

Hope to have this soon. Please let me know if you figure out any workarounds in the meantime so I can incorporate them in the plugin.

[ondrejrohon]

Hey guys, have you found some solution or workaround for this issue? Thanks.

[b0ssi]

Hi everyone,

so, not sure if this fixes the issue for you but I had the same (in combination with AngularJS) and the following did the trick for me; still wondering a bit why though, maybe someone else can shed some light onto the issue?

This did not work:

app.controller("showreelsCtrl", ["$scope", function($scope) {
    $scope.initPlayer = function() {
        $("#myVimeoIframe").on("play", function() {
            console.log("Playback started");
        });
    };
    $scope.$on("$viewContentLoaded", function() {
        $("#myVimeoIframe").on("load", function() {
            $scope.initPlayer();
        };
    });
}

Saving the player into a variable on the scope did not work with the above implementation either.

However, attaching the event callbacks directly on the angular event instead of nesting them in another callback function works well (if someone can explain I'd be curious to hear an explanation!):

app.controller("showreelsCtrl", ["$scope", function($scope) {
    $scope.$on("$viewContentLoaded", function() {
        $("#myVimeoIframe").on("play", function() {
            console.log("Playback started");
        };

        $("#myVimeoIframe").on("stop", function() {
            // ...
        }
    });
}

Hope this helps anyone having a similar issue! :D

[despecial]

Last month we had no problem using the on('play') event. But it stopped working After using this code to check the feedback from Vimeo there was no play event, only playProgress.

$(window).on("message", function(e){
    console.log(e); //see the events come in from Vimeo. The first should be a ready signaling the video is ready
});

Any hints on how to fix this issue?

[jrue]

I just made an update to the plugin to support dynamically added iframes. It was tricky because the plugin automatically goes through all iframes on load, and if they are Vimeo videos, then it will apply the message listener.

But for videos added after page load, you will have to manually call a method I just added called vimeoLoad(), so that it captures messages from Vimeo.

$("<iframe />")
        .attr("src", "https://player.vimeo.com/video/128947850?title=0&amp;byline=0&amp;portrait=0&amp;color=f2f2ea")
        .appendTo("body")
        .vimeoLoad() //new vimeoLoad() method. Call this after appending dynamic iframe.
        .vimeo("play"); //you can call vimeo methods after this.

This is experimental, so please let me know how it works. It didn't appear I need to wait for the iframe load, and you can call it right after appending the iframe. But I haven't tested this extensively.

If you have iframes in your HTML, you shouldn't need to do this.

[Mikeks81]

I'm not using angular or anything but using vimeoLoad() to listen for dynamically swapped src's works perfect for me. Thanks so much @jrue, this is the third library i have tried and it's the only one that works great. One recommendation is the library has a console log that i removed in my code. Not sure if it was intended to be there.