サイトにビデオ プレーヤーがあり、複数のビデオがすべてスライダー タイプのレイアウトになっています。その下に各ビデオのサムネイルがあり、サムネイルのいずれかがクリックされた場合に再生中のビデオを一時停止する必要があります。頭の中に froogaloop.js があり、scripts.js ファイルに次のコードがあります: (function(){
// 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');
});
しかし、自分のサイトでテストすると、動作しません。次のエラーが表示されます: Uncaught ReferenceError: froogaloop is not defined
誰でも助けることができますか?申し訳ありませんが、Froogaloop はよくわかりません。