Vimeo API（froogaloop）。再生/一時停止を使用して動画をプリロードしようとしています

Question

vimeoプレーヤーAPIに問題があります。私はiframeを使用して私のページにVimeoビデオを埋め込み、私はこのiframeに画像を配置します。画像は、再生ボタンを持って、この画像をクリックして画像をフェードアウトしてから、私は、ビデオを再生するには、次のコマンドを使用します。これは、再生があるため少し不機嫌であるという事実を除いて、素晴らしい作品

froogaloop.api('play'); 

動画は再生中に読み込まれます。再生ボタンで画像をクリックしたときに動画が（完全にまたは部分的に）読み込まれるように、動画がページの読み込みを開始するようにします。私は電話でこれをやってみました：

froogaloop.api('play'); 
froogaloop.api('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; 

    });     

} 

Answer 1

再生と一時停止を呼び出すと、ほとんどのプラットフォームでオーバーラップし、一時停止が無視されます。それはときに、ユーザーが実際に実行されないように、イベントハンドラは、自身のバインドを解除する必要があること

Froogaloop(playerID).addEvent('play', function(playerID) { 
     Froogaloop(playerID).api('pause'); 
     Froogaloop(playerID).removeEvent('play'); 
    }); 
    Froogaloop(playerID).api('play'); 

注：それは確実に動作するように取得するには、イベントを再生し、その中に一時停止を呼び出して、このようにイベントハンドラをバインドする必要がありますクリックが再生されます。

Answer 2

これは私には役に立たなかった。
遊びと休息が相殺されているようで、何もしませんでした。 私はプレイできましたが、一時停止しませんでした。

一時停止をシミュレートするためにクリックトリガを使用しました。

$(document).ready(function(){ 

    playerID = $('iframe.talkingHead').attr('id'); 
    setTimeout(function(){ 
        $('.hiddenplay').trigger('click'); 

        //Froogaloop(playerID).api('play'); 
        setTimeout(function(){ 
            Froogaloop(playerID).api('pause'); 
        },800); 
    },1000); 


    $('#imageID').on('click', function(){ 
        $(this).css('display', 'none'); 
        Froogaloop($(this).data('vidref')).api('play'); 
    }); 
    $('.hiddenplay').on('click', function(){ 

        Froogaloop(playerID).api('play'); 
    }); 
}); // end document ready 

は、私はあまりにも早く起動するように見えたし、ビデオの準備ができていなかったかもしれないので、froogaloopにエラーが発生したため setTimoutで一時停止を使用する必要がありました。

htmlがclass="hiddenplay" &を持つ要素は、この場合にも、私はビデオがすべての準備ができているので、クリックされたときは、このケースでは、ビデオを演奏していること、ビデオをカバーするイメージを持っていた付属のビデオが始まる前には黒のフラッシュがない、一時停止。

Answer 3

Vimeo APIを手動で呼び出すことによって、froogaloopを使用せずにVimeoビデオをプリロードします。次のコードは、プレイヤーがプレイをトリガし、すぐにビデオを一時停止する準備が整うまで待機：

var player = $('iframe'); 
var playerOrigin = '*'; 
var preloaded = false; 

// Listen for messages from the player 
if (window.addEventListener){ 
    window.addEventListener('message', onMessageReceived, false); 
} else { 
    window.attachEvent('onmessage', onMessageReceived, false); 
} 

function onMessageReceived(e) { 
    // Handle messages from the vimeo player only 
    if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) { 
    return false; 
    } 

    var data = JSON.parse(e.data); 

    switch (data.event) { 
    case 'ready': 
     onReady(); 
     break; 
    case 'playProgress': 
     // if video is not yet preloaded, pause it right away 
     if(!preloaded) { 
     var preloaded = true; 
     post('pause'); 
     } 
     break; 
    } 
} 

// Helper function for sending a message to the player 
function post(action, value) { 
    var data = { 
    method: action 
    }; 

    if (value) { 
    data.value = value; 
    } 

    var message = JSON.stringify(data); 
    player[0].contentWindow.postMessage(data, playerOrigin); 
} 

function onReady() { 
    post('addEventListener', 'playProgress'); 

    //preload video by triggering `play` as soon as the player is ready 
    post('play'); 
} 

上記sample code provided by Vimeoに基づいています。これは、Internet Explorer 8以上、Firefox 3以上、Safari 4以上、Chrome、Opera 9以上の新しいブラウザでのみ機能することに注意してください。