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

使用Vimeo Javascript API淡入/淡出标题叠加层

1 个答案: