2015-09-05 166 views
2

我已經在這個主題上進行了很多搜索,但是我只能找到與Youtube API的V2相關的資源,這些資源也沒有被depricated。使用Youtube V3 API和JavaScript獲取Youtube視頻網址

我想要做的就是從使用Javascript的Youtube V3 API URL的JSON響應中獲取Youtube視頻標題,縮略圖和鏈接。

我運行下面的代碼,但得到一個錯誤消息Uncaught TypeError: Cannot read property 'items' of undefined

<input id="searchquery" /> 
<div id="results"></div> 

<!-- Include the latest jQuery library --> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 

<script type="text/javascript"> 
jQuery(document).ready(function ($) { 

    $('#searchquery').keyup(function() { 

    // the search term 
    var q = $('#searchquery').val().trim(); 

    // container to display search results 
    var $results = $('#results'); 

    // YouTube Data API base URL (JSON response) 
    var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&key=AIzaSyC3TJRI1C0EVEdl7b19InH1gv9yrAOX2YU" 


    url = url + '&max-results=50'; 

    $.getJSON(url + "&q=" + q, function (json) { 

     var count = 0; 

     if (json.data.items) { 

     var items = json.data.items; 
     var html = ""; 

     items.forEach(function (item) { 

      // Check the duration of the video, 
      // full-length movies are generally longer than 1 hour 
      var duration = Math.round((item.duration)/(60 * 60)); 

      // Filter out videos that aren't in the Film or Movies category 
      if ((duration > 1) && (item.category == "Movies" || item.category == "Film")) { 

      // Include the YouTube Watch URL youtu.be 
      html += '<p><a href="http://youtu.be/' + item.id + '">'; 

      // Add the default video thumbnail (default quality) 
      html += '<img src="http://i.ytimg.com/vi/' + item.id + '/default.jpg">'; 

      // Add the video title and the duration 
      html += '<h2>' + item.title + ' ' + item.duration + '</h2></a></p>'; 
      count++; 
      } 
     }); 
     } 

     // Did YouTube return any search results? 
     if (count === 0) { 
     $results.html("No videos found"); 
     } else { 
     // Display the YouTube search results 
     $results.html(html); 
     } 
    }); 
    }); 
}); 
</script> 

我的網址是 https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&key=AIzaSyC3TJRI1C0EVEdl7b19InH1gv9yrAOX2YU&q=opencourseware

這將返回

{ 
"kind": "youtube#searchListResponse", 
"etag": "\"sGDdEsjSJ_SnACpEvVQ6MtTzkrI/anQeVHiFN6CH_dx-tP89Q8heOos\"", 
"nextPageToken": "CAUQAA", 
"pageInfo": { 
    "totalResults": 24815, 
    "resultsPerPage": 5 
}, 
"items": [ 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"sGDdEsjSJ_SnACpEvVQ6MtTzkrI/4DMiUQkDt0Bic4cV0lZbi7KZ1tk\"", 
    "id": { 
    "kind": "youtube#playlist", 
    "playlistId": "PL-4XVpiAbrw8bRUhUHfm-omUYAyBepYiB" 
    }, 
    "snippet": { 
    "publishedAt": "2015-09-01T06:23:39.000Z", 
    "channelId": "UCOY4GuDhH3KHVcpZqD5S87w", 
    "title": "Popular Videos - Bioinformatics & OpenCourseWare", 
    "description": "", 
    "thumbnails": { 
    "default": { 
     "url": "https://i.ytimg.com/vi/R-PjAS8d1_0/default.jpg" 
    }, 
    "medium": { 
     "url": "https://i.ytimg.com/vi/R-PjAS8d1_0/mqdefault.jpg" 
    }, 
    "high": { 
     "url": "https://i.ytimg.com/vi/R-PjAS8d1_0/hqdefault.jpg" 
    } 
    }, 
    "channelTitle": "", 
    "liveBroadcastContent": "none" 
    } 
    }, 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"sGDdEsjSJ_SnACpEvVQ6MtTzkrI/-D3XCQyB-podnhbL-keBQoIZMb8\"", 
    "id": { 
    "kind": "youtube#video", 
    "videoId": "vOpp8nOp9uA" 
    }, 
    "snippet": { 
    "publishedAt": "2015-08-10T09:27:38.000Z", 
    "channelId": "UCBL-6EKd9b1DW73ZcY-PNcw", 
    "title": "Audio OpenCourseWare", 
    "description": "OpenCourseWare dilaksanakan pada tanggal 10 Juli 2015 di Ruang Video Conference, Gedung D, Lantai 2 Direktorat Sistem Informasi, Telkom University ...", 
    "thumbnails": { 
    "default": { 
     "url": "https://i.ytimg.com/vi/vOpp8nOp9uA/default.jpg" 
    }, 
    "medium": { 
     "url": "https://i.ytimg.com/vi/vOpp8nOp9uA/mqdefault.jpg" 
    }, 
    "high": { 
     "url": "https://i.ytimg.com/vi/vOpp8nOp9uA/hqdefault.jpg" 
    } 
    }, 
    "channelTitle": "", 
    "liveBroadcastContent": "none" 
    } 
    }, 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"sGDdEsjSJ_SnACpEvVQ6MtTzkrI/hwBjyzzUi0M3qf0QKR6EvAD6RTs\"", 
    "id": { 
    "kind": "youtube#playlist", 
    "playlistId": "PL2Co6UkQCJCrvFuM-KEY6Pfccm2PKNhGe" 
    }, 
    "snippet": { 
    "publishedAt": "2015-08-03T21:28:26.000Z", 
    "channelId": "UCqHlUWMIi07M5U6kVSJT7RA", 
    "title": "Popular Videos - OpenCourseWare & Teacher", 
    "description": "", 
    "thumbnails": { 
    "default": { 
     "url": "https://i.ytimg.com/vi/SQI2I48QUBQ/default.jpg" 
    }, 
    "medium": { 
     "url": "https://i.ytimg.com/vi/SQI2I48QUBQ/mqdefault.jpg" 
    }, 
    "high": { 
     "url": "https://i.ytimg.com/vi/SQI2I48QUBQ/hqdefault.jpg" 
    } 
    }, 
    "channelTitle": "", 
    "liveBroadcastContent": "none" 
    } 
    }, 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"sGDdEsjSJ_SnACpEvVQ6MtTzkrI/igp-ZANLFmAQxfuTsPHpNeJwdwg\"", 
    "id": { 
    "kind": "youtube#playlist", 
    "playlistId": "PLfu3FYNDydnC8bAZrkXpFXXxbCE8O9ZYS" 
    }, 
    "snippet": { 
    "publishedAt": "2015-07-07T15:38:00.000Z", 
    "channelId": "UCqL4K9FRJ90uHEvRsSXi5cA", 
    "title": "Popular Videos - MIT OpenCourseWare & Field", 
    "description": "", 
    "thumbnails": { 
    "default": { 
     "url": "https://i.ytimg.com/vi/PgE9oBDIgdc/default.jpg" 
    }, 
    "medium": { 
     "url": "https://i.ytimg.com/vi/PgE9oBDIgdc/mqdefault.jpg" 
    }, 
    "high": { 
     "url": "https://i.ytimg.com/vi/PgE9oBDIgdc/hqdefault.jpg" 
    } 
    }, 
    "channelTitle": "", 
    "liveBroadcastContent": "none" 
    } 
    }, 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"sGDdEsjSJ_SnACpEvVQ6MtTzkrI/9G1cGWzCiMxuc7L_KpgWTyJFjzk\"", 
    "id": { 
    "kind": "youtube#playlist", 
    "playlistId": "PL2Co6UkQCJCp_IpNmpim5CPhKC0gE95jv" 
    }, 
    "snippet": { 
    "publishedAt": "2015-06-19T21:28:19.000Z", 
    "channelId": "UCqHlUWMIi07M5U6kVSJT7RA", 
    "title": "Popular Videos - OpenCourseWare & Educational Technology", 
    "description": "", 
    "thumbnails": { 
    "default": { 
     "url": "https://i.ytimg.com/vi/ad4oFCHBSRQ/default.jpg" 
    }, 
    "medium": { 
     "url": "https://i.ytimg.com/vi/ad4oFCHBSRQ/mqdefault.jpg" 
    }, 
    "high": { 
     "url": "https://i.ytimg.com/vi/ad4oFCHBSRQ/hqdefault.jpg" 
    } 
    }, 
    "channelTitle": "", 
    "liveBroadcastContent": "none" 
    } 
    } 
] 
} 

回答

2

變化json.data.items到json.items

+0

感謝@Nick Hammond,它的工作原理 –

0

where is vid在JSON響應中的eo URL?因爲我也在搜索它,所以請讓我知道YouTube api響應的視頻URL在哪裏。

+0

您可以從'item.id.videoId'獲得視頻ID,然後與youtube URL https://www.youtube.com/watch?v=['item連接。 id.videoId'。希望這就是你正在尋找的....「{」「」「」youtube#searchResult「, 」etag「:」\「sGDdEsjSJ_SnACpEvVQ6MtTzkrI/-D3XCQyB-podnhbL-keBQoIZMb8 \」「, 」id「: 「kind」:「youtube#video」, 「videoId」:「vOpp8nOp9uA」 },' –

+0

@AvineshKumar謝謝,我知道有可能以這種方式訪問​​視頻,但問題在於直接'youtube.com'因此我正在尋找另一種方式,正如我已經搜索過的,有許多網站也在使用YouTube API,但是視頻源與鏈接網址不同......正如我之前在這裏問過的,請檢查出來[http://stackoverflow.com/questions/32444021/how-to-get-url-for-video-using-youtube-api-v3] –

相關問題