2010-06-03 155 views
3

我試圖檢索用戶的youtube視頻列表並將它們嵌入到使用jQuery的頁面中。我的代碼看起來像這樣:用jquery動態嵌入youtube視頻

$(document).ready(function() { 

    //some variables 
    var fl_obj_template = $('<object width="260" height="140">' + 
          '<param name="movie" value=""></param>' + 
          '<param name="allowFullScreen" value="true"></param>' + 
          '<param name="allowscriptaccess" value="always"></param>' + 
          '<embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="140"></embed>' + 
          '</object>'); 

    var video_elm_arr = $('.video'); 


    //hide videos until ready 
    $('.video').addClass('hidden'); 

    //pull video data from youtube 
    $.ajax({ 
    url: 'http://gdata.youtube.com/feeds/api/users/username/uploads?alt=json', 
    dataType: 'jsonp', 
    success: function(data) { 
     $.each(data.feed.entry, function(i,item){ 
     //only take the first 7 videos 
     if(i > 6) 
      return; 

     //give the video element a flash object 
     var cur_flash_obj = fl_obj_template; 

     //assign title 
     $(video_elm_arr[i]).find('.video_title').html(item.title.$t); 

     //clean url 
     var video_url = item.media$group.media$content[0].url; 
     var index = video_url.indexOf("?"); 
      if (index > 0) 
      video_url = video_url.substring(0, index); 

     //and asign it to the player's parameters 
     $(cur_flash_obj).find('object param[name="movie"]').attr('value', video_url); 
     $(cur_flash_obj).find('object embed').attr('src', video_url); 

     //alert(cur_flash_obj); 

     //insert flash object in video element 
     $(video_elm_arr[i]).append(cur_flash_obj); 

     //and show 
     $(video_elm_arr[i]).removeClass('hidden'); 
     }); 
    } 
    }); 
}); 

(當然用「用戶名」是實際的用戶名)。

視頻標題顯示正確,但沒有視頻顯示。是什麼賦予了?

目標HTML看起來像:

<div id="top_row_center" class="video_center video"> 
    <p class="video_title"></p> 
</div> 
+0

Ajax僅適用於來自同一個域的URL。在您自己的域中添加包裝腳本以檢索詳細信息。它可能正在工作,因爲您正在使用本地HTML文件進行測試。 – Gelatin 2010-06-03 21:55:05

+0

@Simon Brown通常就是這種情況,但如果您查看.ajax(http://api.jquery.com/jQuery.ajax/)的Jquery頁面,您將看到「Script和JSONP請求不受相同的原產地政策限制「 – Steven 2010-12-21 19:41:11

回答

2

試試這個

變化:

var fl_obj_template = $('<object width="260" height="140">' +  
          '<param name="movie" value=""></param>' + 
          '<param name="allowFullScreen" value="true"></param>' + 
          '<param name="allowscriptaccess" value="always"></param>' + 
          '<embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="140"></embed>' + 
          '</object>'); 

這樣:

var fl_obj_template = '<object width="260" height="140">' +  
          '<param name="movie" value=""></param>' + 
          '<param name="allowFullScreen" value="true"></param>' + 
          '<param name="allowscriptaccess" value="always"></param>' + 
          '<embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="140"></embed>' + 
          '</object>'; 

我認爲正在使用的YouTube代碼作爲seletor

+0

我只是把它包裹在一個附加:) – danwoods 2010-06-03 22:35:14