我正在尝试根据播放列表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&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&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&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&hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
}
答案 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&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&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&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&hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
}
});
});
*我尚未完全检查此代码,但请注意,您的变量访问权限现在位于.ajax()
回调函数中,以确保在您获得时可以使用它们数据回来了。