I'm pulling some videos from youtube to display on a multimedia page on a site. The code has been working fine for a while, but now, mysteriously, it's broken. Testing on my home machine shows everything works fine. Any idea why this might happen? (note: wordpress site, js is external from WP post, code is visible @ github, no noticeable errors using browser tools or online js lint)
Thanks in advance...
Javascript:
$(document).ready(function() {
//some variables
var videos = []; //placeholder for video information returned from youtube
var video_elm_arr = $('.video'); //array of 'video' elements in DOM
//hide videos until ready
$('.video').addClass('hidden');
//pull video data from youtube
开发者_StackOverflow中文版$.ajax({
url: 'http://gdata.youtube.com/feeds/api/users/danwoodson/uploads?alt=json',
dataType: 'jsonp',
success: function(data) {
alert(data);
$.each(data.feed.entry, function(i,item){
//only take the first 7 videos
if(i > 6)
return;
//create object to hold the video's info
videos[i] = {};
videos[i].title = item.title.$t;
videos[i].url = item.media$group.media$content[0].url; //this will need to be cleaned before use
videos[i].summary = item.content.$t;
videos[i].thumbnail = item.media$group.media$thumbnail[3].url;
//assign title
$(video_elm_arr[i]).find('.video_title').append(videos[i].title);
//clean url
var video_url = videos[i].url;
var index = video_url.indexOf("?");
if (index > 0)
video_url = video_url.substring(0, index);
//and re-assign
videos[i].url = video_url;
if(i == 0){ //only for featured/main
//insert flash object in video element
$(video_elm_arr[i]).find('.video_title').after('<object id="video_0" width="475" height="267.1875">' +
'<param name="movie" value="' + video_url + '&showinfo=0"></param>' +
'<param name="allowFullScreen" value="true"></param>' +
'<param name="allowscriptaccess" value="always"></param>' +
'<embed src="' + video_url + '&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="475" height="267.1875"></embed>' +
'</object>');
//and include summary
$(video_elm_arr[i]).find('#featured_summary').html(videos[i].summary);
}
else{ //else just use thumbnail and enlarge
$(video_elm_arr[i]).find('.video_title').after('<img src="' + videos[i].thumbnail +'" alt="video" id="video_' + i + '" />');
$(video_elm_arr[i]).find('img').animate({height: 84.375, width: 150}, 500);
}
//and finally show
$(video_elm_arr[i]).removeClass('hidden');
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {alert("error with retrieving videos");}
});
//create functionality
$('.non_featured').bind('click', function(){
//get clicked video's id
var clicked_vid_id = $(this).find('img').attr('id');
//clean
var index = clicked_vid_id.indexOf("_");
if (index > 0)
clicked_vid_id = clicked_vid_id.substring(index+1);
//get featured video's id
var cur_featured_vid_id = $('#featured').find('object').attr('id');
//clean
var index = cur_featured_vid_id.indexOf("_");
if (index > 0)
cur_featured_vid_id = cur_featured_vid_id.substring(index+1);
//create new swf object with clicked video's information
var new_featured_vid_swf = '<object id="video_' + clicked_vid_id + '" width="475" height="267.1875">' +
'<param name="movie" value="' + videos[clicked_vid_id].url + '?showinfo=0&autoplay=1"></param>' +
'<param name="allowFullScreen" value="true"></param>' +
'<param name="allowscriptaccess" value="always"></param>' +
'<embed src="' + videos[clicked_vid_id].url + '?showinfo=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="475" height="267.1875"></embed>' +
'</object>';
//clear out clicked video's image
$(this).find('img').remove();
//clear out featured video's original swf object
$('#featured').find('object').remove();
/*assign newly created swf objects to their appropriate locations*/
//set clicked
$(this).find('.video_title').html(videos[cur_featured_vid_id].title);
$(this).append('<img src="' + videos[cur_featured_vid_id].thumbnail +'" alt="video" id="video_' + cur_featured_vid_id + '" />');
$(this).find('img').animate({height: 84.375, width: 150}, 500);
//and set new featured/main
$('#featured').find('.video_title').html(videos[clicked_vid_id].title);
$('#featured').find('.video_title').after(new_featured_vid_swf);
$('#featured').find('#featured_summary').html(videos[clicked_vid_id].summary);
});
});
From your page, these are the errors that occur. Internet Explorer, Chrome, and Firefox all have good debuggers/JavaScript consoles available to show this information.
'pollsL10n' is undefined polls-js.js?ver=2.50, line 1 character 62
pollsL10n.show_loading=parseInt(pollsL10n.show_loading)
Object doesn't support this property or method headcount-multimedia, line 135 character 9
$(".tweet").tweet({
Object doesn't support this property or method slider.js, line 32 character 4
jQuery("#main-photo-slider").codaSlider();
Object doesn't support this property or method main.js, line 31 character 1
jQuery.cookie('widget widget_text');
精彩评论