我通过youtube API在我的网站上创建了一个页面。我的目的是在每个播放列表(缩略图)中显示视频,在顶部视频中显示高。如果用户点击缩略图,主要播放器将使用所选视频的ID进行充值。
Finalli在IE9 +,Firefox和Chrome中正常工作,但我需要它在IE8中工作。
错误在初始$ .get函数中,IE8无法识别此变量并停止页面充电。
这是代码:
var channelName = 'XXXXXXXXXXX';
var vidPrincialID = 'XXXXXXXXXXX';
var listaClientes = 'XXXXXXXXXXXXXXXXX';
var listaResponsabilidad = 'XXXXXXXXXXXXXXXXXX';
var listaProducto = 'XXXXXXXXXXXXXXXXXXXX';
var listaCiclismo = 'XXXXXXXXXXXXXXXXXXX';
var listaIlusiones = 'XXXXXXXXXXXXXXXXXXX';
var listaEducacion = 'XXXXXXXXXXXXXXXXXXXXXX';
var codVideo = '';
$(document).ready(function(){
$.get(
"https://www.googleapis.com/youtube/v3/channels",{
part:'contentDetails',
forUsername:channelName,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
$.each(data.items, function(i, item){
console.log(item);
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
getListClientes(pid);
getListProductos(pid);
getListCiclismo(pid);
getListIlusiones(pid);
getListResponsabilidad(pid);
getListEducacion(pid);
})
}
);
function getVids(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:pid,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
if(videoId == vidPrincialID){
cargaPrincial();
}
})
}
);
}
function getListClientes(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:listaClientes,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
videoMiniatura = item.snippet.thumbnails.default.url;
output = '<div class=\"col-md-3\"><h4 id="tit'+videoId+'">'+videoTitle+'</h4><img src=\"'+videoMiniatura+'\" class=\"img-responsive\" id="'+videoId+'"/></div><div class="oculto" id="text'+videoId+'">'+videoDes+'</div>';
$('#clientes').append(output);
})
}
);
}
function getListProductos(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:listaProducto,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
videoMiniatura = item.snippet.thumbnails.default.url;
codVideo = videoId;
output = '<div class=\"col-md-3\"><h4 id="tit'+videoId+'">'+videoTitle+'</h4><img src=\"'+videoMiniatura+'\" class=\"img-responsive\" id="'+videoId+'"/></div><div class="oculto" id="text'+videoId+'">'+videoDes+'</div>';
//añadir a div resulutados
$('#productos').append(output);
})
}
);
}
function getListCiclismo(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:listaCiclismo,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
videoMiniatura = item.snippet.thumbnails.default.url;
codVideo = videoId;
output = '<div class=\"col-md-3\"><h4 id="tit'+videoId+'">'+videoTitle+'</h4><img src=\"'+videoMiniatura+'\" class=\"img-responsive\" id="'+videoId+'"/></div><div class="oculto" id="text'+videoId+'">'+videoDes+'</div>';
//añadir a div resulutados
$('#ciclismo').append(output);
})
}
);
}
function getListIlusiones(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:listaIlusiones,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
videoMiniatura = item.snippet.thumbnails.default.url;
codVideo = videoId;
output = '<div class=\"col-md-3\"><h4 id="tit'+videoId+'">'+videoTitle+'</h4><img src=\"'+videoMiniatura+'\" class=\"img-responsive\" id="'+videoId+'"/></div><div class="oculto" id="text'+videoId+'">'+videoDes+'</div>';
//añadir a div resulutados
$('#ilusiones').append(output);
})
}
);
}
function getListResponsabilidad(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:listaResponsabilidad,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
videoMiniatura = item.snippet.thumbnails.default.url;
codVideo = videoId;
output = '<div class=\"col-md-3\"><h4 id="tit'+videoId+'">'+videoTitle+'</h4><img src=\"'+videoMiniatura+'\" class=\"img-responsive\" id="'+videoId+'"/></div><div class="oculto" id="text'+videoId+'">'+videoDes+'</div>';
//añadir a div resulutados
$('#responsabilidad').append(output);
})
}
);
}
function getListEducacion(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part:'snippet',
maxResults:10,
playlistId:listaEducacion,
key:'AIzaSyDL0g6DrjqTQt8T_kv5O8QqjUDkokjMuAw'},
function(data){
var output;
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDes = item.snippet.description;
videoList = item.snippet.playlistId;
videoMiniatura = item.snippet.thumbnails.default.url;
codVideo = videoId;
output = '<div class=\"col-md-3\"><h4 id="tit'+videoId+'">'+videoTitle+'</h4><img src=\"'+videoMiniatura+'\" class=\"img-responsive\" id="'+videoId+'"/></div><div class="oculto" id="text'+videoId+'">'+videoDes+'</div>';
//añadir a div resulutados
$('#educacion').append(output);
})
}
);
}
function cargaPrincial(){
vidPrincipal = '<iframe class=\"embed-responsive-item\" src=\"//www.youtube.com/embed/'+videoId+'?theme=light&showinfo=0&modestbranding=1&rel=0\" frameborder=\"0\" allowfullscreen\" id="vidCab"></iframe>';
textPrincipal = '<h2>'+videoTitle+'</h2>';
$('#principal').append(vidPrincipal);
$('#textprincipal').append(textPrincipal);
$('#descripcion').append(videoDes);
}
/**Funciones cambio de video superior**/
$('#clientes, #productos, #ciclismo, #ilusiones, #responsabilidad, #educacion ').on("click","img", function (e) {
e.preventDefault();
var variable = 'tit'+this.id;
var variableTxt = 'text'+this.id;
var url = '//www.youtube.com/embed/'+this.id+'?autoplay=1&theme=light&showinfo=0&modestbranding=1&rel=0';
$('#textprincipal').html('<h2>'+$('#'+variable).html()+'</h2>');
$('#vidCab').attr('src',url);
$('#descripcion').html($('#'+variableTxt).html());
});
});