我正在使用插件Vimeowrap Playlist制作来自特定频道的视频播放列表。这工作得很好,但现在我需要跟踪视频的事件:播放,暂停等。当我使用froogaloop这样做时,我收到错误Cannot read property 'getAttribute' of undefined
。不知怎的,froogaloop与Vimeowrap脚本相冲突。任何人都可以帮我解决这个问题吗?
这是插件代码:
vimeowrap('player').setup({
urls: [
'https://vimeo.com/channels/trocadero'
],
height:363,
item: 5,
plugins: {
'playlist':{
position:'right',
size:340
}
},
});
以下是我整个问题的jsfiddle。
答案 0 :(得分:1)
我设法解决了我的问题......这是jsfiddle解决方案。
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();
}
});