【问题标题】:dynamically embedding youtube videos with jquery使用 jquery 动态嵌入 youtube 视频
【发布时间】:2011-02-27 12:44:59
【问题描述】:

我正在尝试检索用户的 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');
      });
    }
  });
});  

(当然,“用户名”是实际用户名)。

视频标题正确显示,但没有视频显示。什么给了?

目标 html 看起来像:

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

【问题讨论】:

  • Ajax 仅适用于来自同一域的 URL。在您自己的域上添加包装脚本以检索详细信息。它可能有效,因为您正在使用本地 HTML 文件对其进行测试。
  • @Simon Brown 通常是这种情况,但如果您查看 .ajax (api.jquery.com/jQuery.ajax) 的 Jquery 页面,您会看到“脚本和 JSONP 请求不受相同来源策略限制” "

标签: jquery flash youtube embed youtube-api


【解决方案1】:

试试这个

变化:

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 代码被用作选择器

【讨论】:

  • 我只是把它全部包装在一个附加文件中:)
猜你喜欢
  • 2014-02-07
  • 2015-06-01
  • 2015-06-09
  • 1970-01-01
  • 1970-01-01
  • 2012-01-06
  • 2016-11-19
  • 1970-01-01
  • 2011-10-30
相关资源
最近更新 更多