Youtube API和IE8出错

时间:2015-03-27 12:46:02

标签: jquery internet-explorer youtube-data-api

我通过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());

});

});

0 个答案:

没有答案