【问题标题】:youtube api v3 thumbnails not showing in IE 8 and 9youtube api v3 缩略图未在 IE 8 和 9 中显示
【发布时间】:2015-08-16 23:17:03
【问题描述】:

我正在做一个项目,我正在使用 youtube api v3 显示音乐视频的缩略图列表。它适用于 IE 10+,但不适用于 IE 8 或 9。我在想可能是我的 jQuery 版本(1.9.1)可能不受支持,但根据 jQuery 的站点版本 1+ 可以支持 IE6+ .
https://jquery.com/browser-support/

现在我很困惑,因为我找不到任何错误或任何东西,我不确定如何继续。

我也在猜测它是否与使用 iframe 有关,但由于我没有嵌入视频而只是一个缩略图,所以我认为我不需要使用 Youtube Iframe API。

以下是相关代码sn-ps:

<script src="https://apis.google.com/js/client.js"></script>
$.get(
  "https://www.googleapis.com/youtube/v3/search?key=AIzaSyAHnfotDO49DlVtdRzZeZR0KoVo4DWZHNY",
  {
  part: 'snippet',
  q: query,
  maxResults: 8,
  type: 'video',
  },
  function(data){
     var output;
     var viewCount;

     $.each(data.items, function(i, item){
     //console.log(item);
     var videoId = item.id.videoId;
     var vidThumb = item.snippet.thumbnails.medium.url;
     //var vidURL = 'http://www.youtube.com/watch/?v=' + videoId;
     var videoTitle = item.snippet.title;


     $.get(
         "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyAHnfotDO49DlVtdRzZeZR0KoVo4DWZHNY",
         {
         part: 'statistics',
         id: videoId
         },
         function(data){

             $.each(data.items, function(i, item){
                 viewCount = '<p>Views: ' + item.statistics.viewCount + '</p>';

             });

         }
     );  
  output = '<li><iframe id="thumb" src="'+vidThumb+'" scrolling="no"></iframe><div class="info"><h3>' + videoTitle+ '</h3>' + viewCount + newLength + '<button type="button" class="cta" onclick="dlBundle(\'' + videoId + '\')"></button>' +'</div></li>';   

                  $('#searchResults').append(output);

【问题讨论】:

  • 我没有发布整个内容,只是挑选了相关部分。任何帮助将不胜感激。
  • 试试这个缩略图:item.sn-p.thumbnails.default.url,
  • @IanS 试过了,但没用。我注意到 ID 为 #searchResults 的 div 没有附加缩略图。所以我在想也许 jquery 没有触发或其他什么。
  • 我认为它在旧浏览器上失败了,因为它们对语法错误的容忍度较低。 javascript 缺少几个大括号。请参阅下面的答案

标签: javascript internet-explorer iframe youtube youtube-api


【解决方案1】:

我认为您缺少一些大括号等。试试这个:

$.get(
            "https://www.googleapis.com/youtube/v3/search?key=AIzaSyAHnfotDO49DlVtdRzZeZR0KoVo4DWZHNY",
            {
                  part: 'snippet',
                  q: query,
                  maxResults: 8,
                  type: 'video'
            },
            function(data)
            {
                var output;
                var viewCount;

                $.each(data.items, function(i, item)
                {
                     //console.log(item);
                     var videoId = item.id.videoId;
                     var vidThumb = item.snippet.thumbnails.medium.url;
                     //var vidURL = 'http://www.youtube.com/watch/?v=' + videoId;
                     var videoTitle = item.snippet.title;

                     $.get(
                            "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyAHnfotDO49DlVtdRzZeZR0KoVo4DWZHNY",
                            {
                                 part: 'statistics',
                                 id: videoId
                            },
                            function(data)
                            {
                                $.each(data.items, function(i, item)
                                    {
                                        viewCount = '<p>Views: ' + item.statistics.viewCount + '</p>';
                                    });
                            }
                        );  

        output = '<li><iframe id="thumb" src="' + vidThumb + '" scrolling="no"></iframe><div class="info"><h3>' + videoTitle+ '</h3>' 
                            + viewCount + newLength + '<button type="button" class="cta" onclick="dlBundle(\'' + videoId + '\')"></button>' +'</div></li>';   

                    $('#searchResults').append(output);
                });
            }

        );

【讨论】:

    猜你喜欢
    • 2015-01-18
    • 1970-01-01
    • 2013-08-25
    • 2012-06-20
    • 1970-01-01
    • 2013-03-19
    • 2018-01-13
    • 1970-01-01
    • 2015-10-10
    相关资源
    最近更新 更多