我的网站上有一个视频播放器,其中有多个视频都采用滑盖式布局。下面是每个视频的缩略图,如果点击了任何缩略图,我需要暂停任何播放视频。我脑子里有froogaloop.js,这个代码在我的scripts.js文件中: (函数(){
// Listen for the ready event for any vimeo video players on the page
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
/**
* Utility function for adding an event. Handles the inconsistencies
* between the W3C method for adding events (addEventListener) and
* IE's (attachEvent).
*/
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
/**
* Called once a vimeo player is loaded and ready to receive
* commands. You can add events and make api calls only after this
* function has been called.
*/
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
/**
* Prepends log messages to the example console for you to see.
*/
function apiLog(message) {
apiConsole.innerHTML = message + '\n' + apiConsole.innerHTML;
}
// Setup clear console button
var clearBtn = container.querySelector('.console button');
addEvent(clearBtn, 'click', function(e) {
apiConsole.innerHTML = '';
}, false);
apiLog(player_id + ' ready!');
}
})();
然后我为我的缩略图提供了这个:
jQuery("a.switch-foto").click(function(){
jQuery(".fotos").fadeOut();
jQuery(".fotos").removeClass("first");
jQuery('#see_'+this.id).delay(600).fadeIn();
froogaloop.api('pause');
});
但是当我在我的网站上测试它时 - 它不起作用 - 我收到此错误: 未捕获的ReferenceError:未定义froogaloop
任何人都可以帮忙吗?对不起,我真的不懂Froogaloop。
答案 0 :(得分:4)
乍一看,在click事件中,没有定义froogaloop.api调用。为了暂停视频,您应该将播放器传递给Froogaloop暂停。像这样:
Froogaloop( jQuery('iframe')[0] ).api('pause');
请注意,Froogaloop有大写字母。 我也和Froogaloop叠加了。我希望这会对你有所帮助。