0

我正在尝试提取包含在 YouTube 视频的 URL 中的视频 ID，然后将该 ID 存储在一个变量中，我可以在创建 iframe 以嵌入 YouTube 视频时引用该变量。

下面是我的代码：

  $(".result").live("click", function () {
       var result_number = 0;
       youtubequery = "https://gdata.youtube.com/feeds/api/videos?category=Music&q=thesongstitle&v=2&alt=json&max-results=5";
       youtubeid = "";
       $.getJSON(youtubequery, function (vid_data) {
           $.each(vid_data.feed.entry, function (e, vid) {
               if (e == result_number) {
                   youtubeid = vid.id.$t.substring(27);
               }
           });
       });
       iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>";
       $("#youtube_vid").html(iframehtml);
   });

当我第一次单击“结果”类的 div 时，YouTube ID 不包含在存储在变量 iframehtml 中的 iframe html 中。但是，当我第二次单击它时，一切都按预期工作。有谁知道这可能是什么原因造成的？当我包含 iframehtml 变量的创建和将 html 放入#youtube_vid 的行时，我能够让它工作，但由于我网站的功能，我无法以这种方式对其进行编码。

4

2 回答 2

3

您的 getJSON 函数正在执行异步 http get 请求。因此，当您调用它时，它会在数据从请求中返回之前返回。当您再次单击 .result 时，数据已返回。试着把

iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>";
$("#youtube_vid").html(iframehtml);

在您的 getJSON 回调函数中，在 html 显示之前会有延迟，但它会起作用。

于 2012-07-19T19:14:34.827 回答
1

您填写 ID 字段的$.each()位置在 AJAX 回调函数中异步运行，但您正在尝试立即使用该变量。

您还需要iframe在回调函数期间添加：

$(".result").live("click", function () {
    var result_number = 0;
    var youtubequery = "https://gdata.youtube.com/feeds/api/videos?category=Music&q=thesongstitle&v=2&alt=json&max-results=5";
    $.getJSON(youtubequery, function (vid_data) {
        var youtubeid;
        $.each(vid_data.feed.entry, function (e, vid) {
            if (e == result_number) {
                youtubeid = vid.id.$t.substring(27);
            }
        });
        iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>";
        $("#youtube_vid").html(iframehtml);
    });
});

FWIW，您可能更喜欢在您的标记中预先创建iframe所需的大小，然后只需设置.src属性即可开始加载。见http://jsfiddle.net/alnitak/z4rQg/

于 2012-07-19T19:14:45.607 回答