使用 Vimeo Javascript API 淡入/淡出标题覆盖

Question

我正在使用 Vimeo Javascript API 淡入/淡出视频上的标题覆盖。

因为我想在一个页面上显示多个视频，所以效果并不理想。

这是当前的 JS：

var animSpeed = 400;

function onPlay(id) {
    jQuery('.title').fadeOut(animSpeed);
}

function onPause(id) {
    jQuery('.title').fadeIn(animSpeed);
}

function onFinish(id) {
    jQuery('.title').fadeIn(animSpeed);
}

jQuery(function($) {

    var iframe = $('#vplayer')[0],
    player = $f(iframe);

    player.addEvent('ready', function() {
        player.addEvent('play', onPlay);
        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
    });

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

});

http://codepen.io/niallthompson/pen/LVxdXa/

Answer 1

您必须遍历每个 iframe 并创建一个 vimeo 实例。你可以这样做

var animSpeed = 400;

function onPlay(id) {
  var title = $('#' + id).closest('article').find('.title'); // <---- id is iframeID. From there you have to find the .title
  title.fadeOut(animSpeed);
}

function onPause(id) {
  var title = $('#' + id).closest('article').find('.title');
  title.fadeIn(animSpeed);
}

function onFinish(id) {
  var title = $('#' + id).closest('article').find('.title');
  title.fadeIn(animSpeed);
}

jQuery(function($) {

  var iframes = $('iframe');
  $.each(iframes, function(i, v){
    var player = $f(this);
    $(this).data('player', player); // <------ storing vimeo player instance in Data
    player.addEvent('ready', function() {
      player.addEvent('play', onPlay);
      player.addEvent('pause', onPause);
      player.addEvent('finish', onFinish);
    });
  });

  $('.title').click(function(){ 
    $(this).fadeOut(animSpeed);  
    var player = $(this).closest('article').find('iframe').data('player'); <---- Fetch the vimeo player instance from data attribute of iframe
    player.api('pause'); 
  });

});

这是一个演示http://codepen.io/anon/pen/doNgGW