vimeoプレーヤーAPIに問題があります。iframeを使用してページにVimeoビデオを埋め込み、このiframe上に画像を配置します。画像には再生ボタンがあります。この画像をクリックすると画像がフェードアウトし、次のコマンドを使用してビデオを再生します。
froogaloop.api('play');
これは、ビデオの再生中にビデオが読み込まれるため、再生が少し厄介であるという事実を除いて、うまく機能します。ユーザーが再生ボタンで画像をクリックしたときにビデオが(完全にまたは部分的に)ロードされるように、ページのロード時にビデオのロードを開始したいと思います。私はこれを呼び出してみました:
froogaloop.api('play');
froogaloop.api('pause');
ページの読み込み時に順次(以下を参照)。最初に再生を呼び出してから一時停止すると、一時停止中に動画が強制的に読み込まれます。重要なのは、playコマンドの直後のpauseコマンドがどういうわけか無視されるということです。つまり、ビデオはページの読み込み時に再生されているだけです。
誰かがこれを経験したことがありますか、ビデオをプリロードする方法はありますか?
//INIT Vimeo API
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id);
//Call Play and pause to activate loading of whole video
//Vimeo won't let you preload the video by default (because of bandwidth issues etc.)
froogaloop.api('play');
froogaloop.api('pause');
$('#media-home a').click(function(){
$(this).fadeOut('12000');
froogaloop.api('play');
return false;
});
}