動態添加/控制vimeo嵌入

Question

我卡住了，真的可以使用一些幫助。

我想動態添加vimeo嵌入在頁面上。該頁面加載一個靜止的視頻，當點擊靜止幀時，它會淡出，嵌入的視頻開始播放。這只是一個簡單的方法來製作我們自己的播放按鈕，但是我們想要的是，沒有Vimeo加載欄和按鈕位於它的頂部。第一次做到這一點不成問題。

但是，在視頻下方有一個縮略圖列表，當用戶單擊縮略圖時，頁面頂部的視頻和靜止幀必須換出並用新視頻和幀替換。它必須具有相同的功能。所以當用戶點擊該框架時，它會淡出，並且新的視頻將在後面播放。

我試圖每次單擊縮略圖時動態地執行此操作。我的視頻ID是縮略圖的attr。我可以把所有東西都換掉，但是當點擊靜止幀時我無法讓它們播放。所以我認爲它與vimeo的api有關，但我似乎無法弄清楚。

看看這裏的代碼，讓我知道，如果你看到的問題是什麼？

/*Load videos into top container when thumbnail is clicked....*/ 
     $('.thumb').click(function(){ 
      theID = $(this).attr('id'); 
      $('#topImage').attr('src','<? echo site_url();?>/video_still_frame.jpg'); 
      $('#topImage').show(); 
      $('#embedContainer').html("<iframe id='player_"+theID+"' src='http://player.vimeo.com/video/"+theID+"?autoplay=0&api=1&player_id=player_"+theID+"' width='833' height='474' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>"); 
      clearPlayer(); 
      createPlayer(theID); 
      $('#embedContainer').hide(); 

     }); 


    function clearPlayer(){ 
     iframe=''; 
     player=''; 
     status=''; 
    } 

    /*VIMEO API*/ 
    function createPlayer(idToUse){ 
     alert(idToUse); 
     var iframe = $('#player_'+idToUse)[0], 
      player = $f(iframe), 
      status = $('.status'); 
      alert('playerCreated'); 

     // When the player is ready, add listeners for pause, finish, and playProgress 
     player.addEvent('ready', function() { 
      status.text('ready'); 
      player.addEvent('pause', onPause); 
      player.addEvent('finish', onFinish); 
      player.addEvent('playProgress', onPlayProgress); 
      alert('add listeners'); 
     }); 

     // Call the API when a button is pressed  
     $('#topImage, #play').click(function(){ 
      player.api('play'); 
      alert('play video'); 
     }); 

     function onPause(id) { 
      status.text('paused'); 
     } 

     function onFinish(id) { 
      status.text('finished'); 
     } 

     function onPlayProgress(data, id) { 
      status.text(data.seconds + 's played'); 
     } 

} 

    /*Run once on page load */ 
    createPlayer('123456789'); 

Answer 1

我不是專家，但也許是這樣的：http://jsfiddle.net/MAhE6/？

var player = $f(document.getElementById('player')); 
    player.addEvent('ready', function() { 
    player.api('play'); 
}); 


$("#1").click(function() { 
    $iframeSRC = "http://player.vimeo.com/video/65520135?api=1&player_id=player"; 
    $("#player").attr("src",$iframeSRC); 
}); 

$("#2").click(function() { 
    $iframeSRC = "http://player.vimeo.com/video/65511705?api=1&player_id=player"; 
    $("#player").attr("src",$iframeSRC); 
}); 

$("#3").click(function() { 
    $iframeSRC = "http://player.vimeo.com/video/65448540?api=1&player_id=player"; 
    $("#player").attr("src",$iframeSRC); 
});