来自播放列表范围问题的jQuery YouTube数组

时间:2014-02-22 16:05:49

标签: javascript jquery arrays youtube

我正在尝试根据播放列表ID提取YouTube视频列表,然后将其传递给YouTube轮播脚本。虽然我不确定如何解决它,但我有一些范围问题。

基本上,我声明了数组yt_videos,然后用$ .each循环中的各个视频的ID填充它。当我尝试在外部函数中访问此数组时,它是未定义的。我确信解决方案相当简单,只是无法靠自己实现。

这是小提琴:http://jsfiddle.net/wardrobe/Nz87f/2/

这是JS:

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PLDD79FC8870945AA5?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
var yt_videos = [];

$.getJSON(playListURL, function(data) {
    var list_data="";
    $.each(data.feed.entry, function(i, item) {
        var feedTitle = item.title.$t;
        var feedURL = item.link[1].href;
        var fragments = feedURL.split("/");
        var videoID = fragments[fragments.length - 2];
        yt_videos.push(videoID);
    });
});


/*Video height and width*/
var yt_height = 346;
var yt_width = 615;

/*-----DO NOT EDIT BELOW THIS-----*/
jQuery(document).ready(function () {
    var yt_html = "";

    for (var num=0, len=yt_videos.length; num<len; ++num){
        yt_html = yt_html + "<li><a onclick='change_embeded(\"" + yt_videos[num] + "\")'><img src='http://img.youtube.com/vi/"+yt_videos[num]+"/2.jpg' class='myimage' style='max-height:75px;' /></a></li>";
    }

    jQuery('#yt_container').html('<div id="yt_videosurround"><div id="yt_embededvideo"><object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object></div></div><ul id="mycarousel" class="jcarousel-skin-tango">'+yt_html+'</ul>');
    var embeded_cssObj = {
        'width' : yt_width,
        'height' : yt_height
    } 
    jQuery('#yt_embededvideo').css(embeded_cssObj);
    jQuery('#yt_videosurround').css(embeded_cssObj);
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular'
    });
});


function change_embeded(video_id){
    jQuery('#yt_embededvideo').html('<object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
}

1 个答案:

答案 0 :(得分:1)

访问可能尚未从服务器到达的数据。

一些重组 - 试试这个 - http://jsfiddle.net/QQ34V/

jQuery(document).ready(function () {

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PLDD79FC8870945AA5?v=2&alt=json&callback=?',
videoURL= 'http://www.youtube.com/watch?v=',
yt_videos = [],
yt_height = 346,
yt_width = 615,
yt_html = "";

    $.getJSON(playListURL, function(data) {
        var list_data="";
        $.each(data.feed.entry, function(i, item) {
            var feedTitle = item.title.$t;
            var feedURL = item.link[1].href;
            var fragments = feedURL.split("/");
            var videoID = fragments[fragments.length - 2];
            yt_videos.push(videoID);
        });

        for (var num=0, len=yt_videos.length; num<len; ++num){
            yt_html = yt_html + "<li><a onclick='change_embeded(\"" + yt_videos[num] + "\")'><img src='http://img.youtube.com/vi/"+yt_videos[num]+"/2.jpg' class='myimage' style='max-height:75px;' /></a></li>";
        }

        jQuery('#yt_container').html('<div id="yt_videosurround"><div id="yt_embededvideo"><object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object></div></div><ul id="mycarousel" class="jcarousel-skin-tango">'+yt_html+'</ul>');
        var embeded_cssObj = {
            'width' : yt_width,
            'height' : yt_height
        } 
        jQuery('#yt_embededvideo').css(embeded_cssObj);
        jQuery('#yt_videosurround').css(embeded_cssObj);
        jQuery('#mycarousel').jcarousel({
            wrap: 'circular'
        });

        /* for correct placement of this function you will need to provide more info on where/ how it is called */
        function change_embeded(video_id){
            jQuery('#yt_embededvideo').html('<object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
        }

    });

});

*我尚未完全检查此代码,但请注意,您的变量访问权限现在位于.ajax()回调函数中,以确保在您获得时可以使用它们数据回来了。