Vimeo API - 加載視頻

Question

我知道我的方法有點像jQuery和JavaScript，但對於優化，我有點虛弱，但願意學習新東西。

我當前正在從Vimeo加載視頻到我們的網站上，當用戶單擊適當的圖像區域時。這工作正常，但我覺得這不是一個完整的表現方式去做。

有沒有人看到我寫下面的代碼有哪些問題可以做得更好？

JS

var videoData = [ 
{ 
    'player_id':'video1', 
    'videoURL':'<?php the_field('two_vimeo_video_url'); ?>', 
    'width':'1000', 
}, 
{ 
    'player_id':'video2', 
    'videoURL':'<?php the_field('six_vimeo_video_url'); ?>', 
    'width':'1000', 
}]; 

function loadVideo(target, videoid) { 
    $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[videoid]['videoURL']) + '&api=1&player_id='+ videoData[videoid]['player_id'] +'&width='+videoData[videoid]['width']+'&byline=0&color=ffffff&title=0'+'&callback=?', function(data){ 

     $(target).find('.video-container').html(data.html); // puts an iframe embed from vimeo's json 

     $(target).closest('iframe').load(function(){ 

      $f(player).addEvent('ready', function(id){ 
       var vimeoVideo = $f(videoid); 
      }); 
     }); 
    }); 
} 

$(function(){ 
    // Create array to store values 
    var vimeoArray = []; 
    var videoContainer = $('.video-container'); 

    // loop through st 
    $(videoContainer).each(function(index, value) { 

     // get the image with the data attr on each loop 
     var dataAttr = $(this).attr('data-video'); 

     // if dataAttr is not false 
     if (dataAttr !== undefined) { 

      // push data attribute value into array 
      vimeoArray.push(dataAttr); 

      // Store last element of array on iteration 
      var videoid = vimeoArray[vimeoArray.length-1]; 

      // attach click handler to the parent of the scoped element 
      $(this).parent().click(function(){ 

       // load the video 
       loadVideo(this, videoid); 
       $(this).unbind('click'); 
       $(this).find('.b-studio__image').hide(); 

      }); 
     } 
    }); 
}); 

我創建了一個jsfiddle以及所有的代碼和一些虛擬數據，任何建議將是真正的幫助:)

Answer 1

我覺得你並不真的需要將條目存儲在數組中以獲取增量ID，只需使用相對於當前選擇的元素索引即可。此外，我進行了一些美化改進，併爲您的loadVideo功能添加了回調，因此圖像在加載視頻後立即隱藏起來。

var videoData = [{ 
    'player_id':'video1', 
    'url':'http://vimeo.com/87701971', 
    'width':'1000' 
}, 
{ 
    'player_id':'video2', 
    'url':'http://vimeo.com/73893277', 
    'width':'1000' 
}]; 

function loadVideo($target, ix, next){ 
    return function() { 
     var video = videoData[ix]; 
     var path = 'http://www.vimeo.com/api/oembed.json?'+ 
      Object.keys(video).map(function(key){ 
       return key + '=' + video[key]; 
      }).join('&')+ 
      'api=1&byline=0&color=ffffff&title=0&callback=?'; 
     $.getJSON(path, function(data){ 
      $target.find('.video-container').html(data.html); 
      $target.closest('iframe').load(function(){ 
       $f(player).addEvent('ready', function(id){ 
        var vimeoVideo = $f(videoid); 
        next(); 
       }); 
      }); 
     }); 
    }; 
} 

$(function(){ 
    $('.video-container').each(function(ix){ 
     var $cont = $(this), 
      $par = $cont.parent(); 
     var attr = $cont.attr('data-video'); 
     if (typeof attr !== typeof undefined && attr !== false) { 
      $par.one('click', loadVideo($par, ix, function(){ 
       $container.find('.b-studio__image').hide(); 
      })); 
     } 
    }); 
});