Управление, когда миниатюра Vimeo отключается, и начинается видео

Question

Я просматриваю vimeo embed api. Я хочу, чтобы видео автовоспроизведения от нагрузки, которую я работать, но в настоящее время, что происходит, как это:

• игрок загружает затем воспроизводится автоматически [событие «готовы»]
• миниатюр удалена и показывает черным для около второго
• видео начинает играть [событие "playProgess"]

Проблема заключается в втором шаге. Я пытаюсь устранить этот черный экран между тем, когда эскиз скрывается (когда начинается воспроизведение), когда видео появляется и начинает воспроизводиться.

Как я могу понять, это можно решить, чтобы сохранить эскиз вокруг и вызвать эскиз скрыть на первом «playProgress», но я никак не могу найти способ управления, когда миниатюра включается или выключается.

Можно ли это контролировать? Я знаю, что могу вытащить миниатюру и наложить ее поверх iframe, но я надеюсь на более чистое исправление (сохраните все это в iframe).

Вот ручка с апи бега: http://codepen.io/mattcoady/pen/KMzZMZ

$(function() { 
    var player = $('iframe'); 
    var playerOrigin = '*'; 
    var status = $('.status'); 

    // Listen for messages from the player 
    if (window.addEventListener) { 
     window.addEventListener('message', onMessageReceived, false); 
    } 
    else { 
     window.attachEvent('onmessage', onMessageReceived, false); 
    } 

    // Handle messages received from the player 
    function onMessageReceived(event) { 
     // Handle messages from the vimeo player only 
     if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) { 
      return false; 
     } 

     if (playerOrigin === '*') { 
      playerOrigin = event.origin; 
     } 

     var data = JSON.parse(event.data); 

     console.log(data.event); 

     switch (data.event) { 
      case 'ready': 
       onReady(); 
       break; 

      case 'playProgress': 
       onPlayProgress(data.data); 
       break; 

      case 'pause': 
       onPause(); 
       break; 

      case 'finish': 
       onFinish(); 
       break; 
      case 'play': 
       onPlay(); 
       break; 
     } 
    } 

    // Call the API when a button is pressed 
    $('button').on('click', function() { 
     post($(this).text().toLowerCase()); 
    }); 

    // 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(message, playerOrigin); 
    } 

    function onReady() { 
     status.text('ready'); 

     post('play'); 

     post('addEventListener', 'pause'); 
     post('addEventListener', 'finish'); 
     post('addEventListener', 'playProgress'); 
    } 

    function onPause() { 
     status.text('paused'); 
    } 

    function onFinish() { 
     status.text('finished'); 
    } 

    function onPlay(){ 
     alert('play') 
    } 

    function onPlayProgress(data) { 
     status.text(data.seconds + 's played'); 
    } 
}); 

Answer 1

То, что я в конечном итоге происходит с моим Hacky исправить. Он натягивает миниатюру и кладет ее поверх видео. Когда мой скрипт обнаруживает событие playProgress, это означает, что видео на самом деле играет. Я использую jQuery для угасания обложки миниатюр.

http://codepen.io/mattcoady/pen/YWqaWJ

$(function() { 
    var player = $('iframe'); 
    var playerOrigin = '*'; 
    var videoId = 76979871; 

    player.attr('src', 'https://player.vimeo.com/video/' + videoId + '?api=1&player_id=player1&background=1&autoplay=1&loop=1'); 

    // Listen for messages from the player 
    if (window.addEventListener) { 
    window.addEventListener('message', onMessageReceived, false); 
    } else { 
    window.attachEvent('onmessage', onMessageReceived, false); 
    } 

    $.getJSON('http://vimeo.com/api/v2/video/' + videoId + '.json', {jsonp: 'callback',dataType: 'jsonp'}, function(data) { 
    var thumbnail = document.createElement('img'); 
    thumbnail.src = data[0].thumbnail_large; 
    thumbnail.style.width = document.querySelector('#player1').offsetWidth + 'px'; 
    thumbnail.style.height = document.querySelector('#player1').offsetHeight + 'px'; 
    document.querySelector('#vimeo-thumb-container').appendChild(thumbnail); 
    }) 

    // Handle messages received from the player 
    function onMessageReceived(event) { 
    // Handle messages from the vimeo player only 
    if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {return false;} 
    if (playerOrigin === '*') { playerOrigin = event.origin; } 

    var data = JSON.parse(event.data); 

    switch (data.event) { 
     case 'ready': 
     onReady(); 
     break; 

     case 'playProgress': 
     onPlayProgress(data.data); 
     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(message, playerOrigin); 
    } 

    function onReady() { 
    post('play'); 
    post('addEventListener', 'playProgress'); 
    } 

    function onPlayProgress(data) { 
    $('#vimeo-thumb-container').fadeOut(250); 
    } 

});