Question

我的vimeo播放器API存在问题。我使用iframe在我的页面中嵌入了Vimeo视频，我将图像放在这个iframe上。图像有一个播放按钮，单击此图像淡出图像，然后我使用以下命令播放视频：

froogaloop.api('play');

这很有效，除了播放有点胡思乱想因为视频在播放时加载。我希望视频在页面加载时开始加载，以便在用户使用播放按钮单击图像时（全部或部分）加载视频。我尝试通过调用：

来做到这一点

froogaloop.api('play');
froogaloop.api('pause');

按页面加载顺序（见下图）。首先调用播放然后暂停应强制视频在暂停时加载。重点是直接跟随播放命令的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

通过手动调用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"＆amp;元素的元素。同样在这种情况下，我有一个覆盖视频的图像，当点击播放视频时，在这种情况下，由于视频已准备好暂停，视频开始前没有黑色闪光。

Vimeo API（froogaloop）。尝试使用播放/暂停预加载视频

3 个答案: