在YouTube API中通过AJAX访问视频持续时间

时间:2018-04-18 14:26:30

标签: javascript arrays json ajax youtube-api

我一直在尝试创建一个小脚本,通过id访问YouTube视频并确定其持续时间。

这是我的剧本:

var vidID = "";

var vidData;

var vidDuration;

function getResponse() {
  $.getJSON( "https://www.googleapis.com/youtube/v3/videos?id=unSlPx7Zu-w&part=contentDetails&key=AIzaSyCSMBWe5CbW122szJGvGjQ6UrktPL4Z0Mw", function( data ) {
    var items = [];
    
    vidDuration = data;
    
    $.each( data, function( key, val ) {
      items.push( "<li id='" + key + "'>" + val + "</li>" );
    });
    
    $('body').append (JSON.stringify(data));
    
    $( "<ul/>", {
      "class": "my-new-list",
      html: items.join( "" )
    }).appendTo( "body" );
  });
}

getResponse();

console.log(vidDuration.items[0][contentDetails][duration]);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js"></script>
</body>
</html>

控制台结果:

"error"
"TypeError: Cannot read property 'items' of undefined
    at felepivuni.js:28:50
    at https://static.jsbin.com/js/prod/runner-4.1.4.min.js:1:13924
    at https://static.jsbin.com/js/prod/runner-4.1.4.min.js:1:10866"

正如您所看到的,这与输出几乎一样。它为我们提供了字符串化的JSON,然后是2个主要的JSON对象。

但在那之后,我得到了 [对象]两次..

以下是我们收到的数据包的结构:

{
 "kind": "youtube#videoListResponse",
 "etag": "\"XlbeM5oNbUofJuiuGi6IkumnZR8/ny1S4th-ku477VARrY_U4tIqcTw\"",
 "items": [
  {

   "id": "9bZkp7q19f0",
   "kind": "youtube#video",
   "etag": "\"XlbeM5oNbUofJuiuGi6IkumnZR8/HN8ILnw-DBXyCcTsc7JG0z51BGg\"",
   "contentDetails": {
    "duration": "PT4M13S",
    "dimension": "2d",
    "definition": "hd",
    "caption": "false",
    "licensedContent": true,
    "regionRestriction": {
     "blocked": [
      "DE"
     ]
    }
   }
  }
 ]
}

虽然我知道此问题已经出现过,但我相信我的情况是真诚的,而我仍然没有找到问题的答案。

每当您运行上面的代码片段时,控制台都会记录 undefined ,并且输出(如上所述)具有[Object object],这是可以预期的......

我知道这是拖延,但我真的很感谢为什么我的代码不能正常工作的解释!

即使我知道这存在,Youtube Video Duration API v3,它也无法解决我的问题,所以我仍然在问这个......

非常感谢!

  • 诺亚

1 个答案:

答案 0 :(得分:2)

你正在调用异步的$ getJson。

的GetResponse(); //你需要等待这个函数返回