jquery - 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

如果您依次调用播放和暂停，它们将在大多数平台上重叠并导致暂停被忽略。为了让它可靠地工作，您应该绑定(bind)一个事件处理程序来播放事件并在其中调用暂停，如下所示:

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

请注意，事件处理程序应自行解除绑定(bind)，以便在用户实际单击播放时不会执行该事件处理程序。