使用jquery动态嵌入youtube视频

使用jquery动态嵌入youtube视频,jquery,flash,youtube,embed,youtube-api,Jquery,Flash,Youtube,Embed,Youtube Api,我正在尝试检索用户的youtube视频列表,并使用jQuery将其嵌入到页面中。我的代码如下所示: $(document).ready(function() { //some variables var fl_obj_template = $('<object width="260" height="140">' + '<param name="movie" value=""></par

我正在尝试检索用户的youtube视频列表,并使用jQuery将其嵌入到页面中。我的代码如下所示:

  $(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');
      });
    }
  });
});  
$(文档).ready(函数(){
//一些变量
变量fl_obj_模板=$(''+
'' +  
'' +  
'' +  
'' +  
'');  
var video_elm_arr=$('.video');
//隐藏视频直到准备就绪
$('.video').addClass('hidden');
//从youtube获取视频数据
$.ajax({
网址:'http://gdata.youtube.com/feeds/api/users/username/uploads?alt=json',
数据类型:“jsonp”,
成功:功能(数据){
$。每个(data.feed.entry,函数(i,项){
//仅拍摄前7段视频
如果(i>6)
返回;
//给视频元素一个flash对象
var cur_flash_obj=fl_obj_模板;
//转让所有权
$(video_elm_arr[i]).find('.video_title').html(item.title.$t);
//清除url
var video_url=item.media$group.media$content[0].url;
var index=video_url.indexOf(“?”);
如果(索引>0)
视频url=视频url.子字符串(0,索引);
//并将其分配给播放器的参数
$(cur_flash_obj).find('object param[name=“movie”]).attr('value',video\u url);
$(cur_flash_obj).find('object embed').attr('src',video_url);
//警报(当前闪烁对象);
//在视频元素中插入flash对象
$(video_elm_arr[i])。追加(cur_flash_obj);
//展示
$(video_elm_arr[i]).removeClass('hidden');
});
}
});
});  
(当然,用户名是实际的用户名)

视频标题显示正确,但未显示任何视频。有什么好处

目标html如下所示:

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

试试这个

更改:

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_模板=$(''+
'' +   
'' +   
'' +   
'' +   
''); 
为此:

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_模板=“”+
'' +   
'' +   
'' +   
'' +   
'';  

我认为youtube代码被用作选择器,Ajax只能在同一域的URL上工作。在您自己的域上添加包装器脚本以检索详细信息。这可能是因为您正在使用本地HTML文件对其进行测试。@Simon Brown通常是这样,但如果您查看.ajax()的Jquery页面,您将看到“脚本和JSONP请求不受相同源策略限制”我只是将其全部包装在一个附加中:)