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

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

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

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

Answer 2

通过手动调用 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+。

Answer 3

这对我不起作用。
似乎播放和暂停相互抵消了，什么也没做。 我可以播放，但不能暂停。

我最终使用点击触发器来模拟暂停。

$(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" 的元素，并且在这种情况下，我有一个覆盖视频的图像，当单击它时播放视频，在这种情况下，由于视频已准备就绪，因此在视频之前没有黑色闪光开始。