如何使用Vimeo JavaScript API根據播放位置觸發事件

Question

我有以下Vimeo嵌入式播放器代碼，但只是其中的一小部分。

我想要做的是在視頻的某個部分或中途淡入#homepage-layout-container-overlay。

有誰知道這是怎麼完成的？我認爲這可能涉及標記或其他內容，但我不確定。

// When the player is ready, add listeners for play, pause, finish, and playProgress 
player.addEvent('ready', function() { 
    player.addEvent('play', onPlay); 
    player.addEvent('pause', onPause); 
    player.addEvent('finish', onFinish); 
}); 

$('.introContent, iframe').click(function(){ 
    $('.blankOverlay').fadeIn(animSpeed); 
}); 

$('.blankOverlay').click(function(){ 
    $(this).fadeOut(animSpeed); 
    player.api('pause'); 
}); 

function onPlay(id) { 

} 

function onPause(id) { 

} 

function onFinish(id) { 
    jQuery('#homepage-layout-container-overlay').fadeIn(animSpeed); 
} 

Answer 1

可以使用playProgress事件。

playProgress

燒成而視頻播放。包括秒數，播放的百分比和總持續時間。

{ 
    "seconds":"4.308", 
    "percent":"0.012", 
    "duration":"359.000" 
} 

• 如果你想使用fadeIn中途，你會檢查percent >= 0.5，因爲百分比實際上是一個因素。

• 如果您想在1分15秒時使用fadeIn，請檢查seconds >= 75。

這個例子變淡文本HELLO THERE後5％，可在此JSFiddle：

HTML：

<iframe id="player1" src="//player.vimeo.com/video/141178611?api=1&player_id=player1" width="300" height="240" frameborder="0"></iframe> 
<div id="container">HELLO THERE</div> 

的JavaScript

$(function() { 
    var container = $('#container'); 
    container.fadeOut(0); 

    var player = $f($('#player1')[0]); 

    player.addEvent('ready', function() { 

     player.addEvent('playProgress', function(data,id){ 

      if(data.percent >= 0.05) { 
       container.fadeIn(3000); 
      } 
     }); 
    }); 
});