控制何時Vimeo縮略圖關閉，視頻開始

Question

我正在尋找vimeo嵌入api。我希望視頻自動播放上，我有工作負載，但目前就是這樣發生了什麼：

• 播放器加載，然後自動播放[事件「準備好了」]
• 縮略圖刪除，並顯示黑色大約一秒鐘
• 視頻開始播放[事件「playProgess」]

問題是第二步。我試圖消除縮略圖隱藏時（開始播放時）到視頻實際顯示並開始播放之間的黑屏。

我認爲它的解決方法是保持縮略圖並觸發縮略圖隱藏在第一個「playProgress」上，但我無法控制何時縮略圖打開或關閉。

這有可能控制嗎？我知道我可以拉動縮略圖並將其覆蓋在iframe上，但我希望能有一個更清晰的修復程序（將它全部包含在iframe中）。

下面是用API運行筆： 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

我最終什麼事跟我哈克修復去。它會拉動縮略圖並將其放在視頻上。當我的腳本檢測到「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); 
    } 

});