使用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