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。

此示例在5％后的文字HELLO THERE中淡出，可在此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);
            }
        });
    });
});

Answer 2

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

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

2 个答案: