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 

我不得不用一個暫停與setTimout因爲它似乎太早期火災並造成上froogaloop錯誤，也許是因爲影片還沒有準備好。

的HTML包含class="hiddenplay" &也是在這種情況下，我有一個圖像覆蓋視頻，該按鈕時播放的視頻，並在這種情況下，由於視頻是齊全的元素暫停有視頻開始之前沒有黑色閃光。

Answer 3

您通過手動調用Vimeo API預裝Vimeo視頻而不使用froogaloop。下面的代碼一直等待，直到玩家準備然後觸發播放，然後立即暫停視頻：

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+。