Vimeo API (froogaloop). Попытка предварительно загрузить видео с помощью воспроизведения / паузы - PullRequest
Новая
       40

Vimeo API (froogaloop). Попытка предварительно загрузить видео с помощью воспроизведения / паузы

3 голосов
/ 09 декабря 2011

У меня проблема с API проигрывателя vimeo. Я встраиваю видео Vimeo в свою страницу, используя iframe, я помещаю изображение поверх этого 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;   

    });                

}

Ответы [ 3 ]

2 голосов
/ 18 апреля 2015

Вы предварительно загружаете видео Vimeo без использования froogaloop, вызывая API 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');
}

Вышеуказанное основано на примере кода, предоставленного Vimeo .Обратите внимание, что это будет работать только в новых браузерах: Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome и Opera 9+.

2 голосов
/ 23 июля 2012

Если вы вызываете play и pause последовательно, они будут перекрываться на большинстве платформ и вызывать игнорирование pause.Чтобы он работал надежно, вы должны привязать обработчик события к воспроизведению события и вызвать в нем паузу, например: 

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

Обратите внимание, что обработчик события должен отсоединиться, чтобы он не выполнялся, когдапользователь фактически нажимает кнопку воспроизведения.

0 голосов
/ 09 мая 2013

Это не сработало для меня.
Казалось, что игра и пауза отменяют друг друга, и ничего не было сделано. Я мог играть, но не пауза.

В итоге я использовал триггер щелчка для имитации паузы. 

$(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", а также в этом случае у меня было изображение, покрывающее видео, которое при нажатии воспроизводило видео, и в этом случае, поскольку видео все готово, пауза, перед видео нет черной вспышки начинается.

...