jqueryvimeovimeo-apivimeo-playerfroogaloop

Vimeo froogaloop conflict with plugin


I am using the plugin Vimeowrap Playlist to make a playlist of videos from a certain channel. That is working just fine, but now I need to track the events of the videos: play, pause etc. When I use froogaloop to do that, I get the error Cannot read property 'getAttribute' of undefined. Somehow froogaloop is conflicting with Vimeowrap script. Can anyone help me with this problem?

This is the plugin code:

vimeowrap('player').setup({
    urls: [
        'https://vimeo.com/channels/trocadero'
    ],
    height:363,
    item: 5,
    plugins: {
        'playlist':{
            position:'right',
            size:340
        }
    },



});

Here is the jsfiddle of my whole problem.


Solution

  • I managed to resolve my problem...here is the jsfiddle solution.

    var vimeoPlayers = [];
    
    function VimeoPlayer (playerId) {
    var iframe = $('#' + playerId),
      contentWindow = iframe[0].contentWindow,
      targetOriginUrl = iframe.attr('src').split('?')[0];
    console.log(iframe);
    console.log(contentWindow);
    console.log(targetOriginUrl);
    
    contentWindow.postMessage({ 'method': 'addEventListener', 'value': 'pause' }, "http:"+targetOriginUrl);
    contentWindow.postMessage({ 'method': 'addEventListener', 'value': 'play' }, "http:"+targetOriginUrl);
    
    return {
    play: function () {
        contentWindow.postMessage({ 'method': 'play' }, "http:"+targetOriginUrl);
    
    },
    
    pause: function() {
      contentWindow.postMessage({ 'method': 'pause' }, "http:"+targetOriginUrl);
    
    },
    
    unload: function() {
      contentWindow.postMessage({ 'method': 'unload' }, "http:"+targetOriginUrl);
    }
    }
    }
    
    // Listen for postMessage events
    $(window).on('message', function(e) {
    var data = $.parseJSON(e.originalEvent.data);
    
    if (data.event === 'ready') {
    var vimeoPlayer = new VimeoPlayer(data.player_id);
    
    vimeoPlayers.push(vimeoPlayer);
    }
    if(data.event==='play'){
       console.log('play');
     }
     if(data.event==='pause'){
       console.log('pause');
     }
    
     console.log(data);
    });
    
    
    
    $('.vimeo-controls .pause-all').on('click', function () {
    for (var i = 0; i < vimeoPlayers.length; i++) {
    vimeoPlayers[i].pause();
    }
     });
    
    $('.vimeo-controls .play-all').on('click', function () {
    for (var i = 0; i < vimeoPlayers.length; i++) {
    vimeoPlayers[i].play();
    }
     });
    
    $('.vimeo-controls .unload-all').on('click', function () {
    for (var i = 0; i < vimeoPlayers.length; i++) {
     vimeoPlayers[i].unload();
     }
       });