如何使用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); 
      } 
     }); 
    }); 
});