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.
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();
}
});