如何使用 Vimeo JavaScript API 根据播放位置触发事件答案

【问题标题】：How to trigger an event depending on playback position using the Vimeo JavaScript API如何使用 Vimeo JavaScript API 根据播放位置触发事件
【发布时间】：2016-01-03 08:54:05
【问题描述】：

我有以下 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);
}

【问题讨论】：

我编辑了标题，很模糊。随意改进它。

标签： javascript api vimeo

【解决方案1】：

您可以使用timeupdate 事件。

var options = {
  id: 144242774
}
var Player = new Vimeo.Player('vimeo-video', options);
Player.on('timeupdate', function(data) {
  console.log(data);
});

<div id="vimeo-video"></div>
<script src="https://player.vimeo.com/api/player.js"></script>

输出

{
    "duration": 1.01,
    "percent": 0.00,
    "seconds": 1.000
}

【讨论】：

【解决方案2】：

您可以使用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);
            }
        });
    });
});

【讨论】：