Output Videoname and infos correctly after update from youtube data api v2 to v3

问题

I hope some of you got already experience with this problem. After Update from youtube data api v2 to v3 i got a problem with the output of the thumbnails and names and video durations.I hope there is an easy way, actualy he only gives me an text with undefiened and in the links an Object is showing up. this is the code so far really need some help thanks.

 // YouTube Data API base URL (JSON response)
    var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=50&key=XXXXXXXXXX"



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

      var count = 0;

      if (json.items) {

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

        items.forEach(function (item) {


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

            // Add the default video thumbnail (default quality)
            html += '<img src="https://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++;

        });
      }

回答1:

You only have to do a few changes:

Instead of (item.title), use (item.snippet.title).
Instead of (item.id), use (item.id.videoId).
Unfortunately, the duration property/value is not available in the response.

If you want the "duration" of a video, you have to use the (Videos) API.

URL: https://www.googleapis.com/youtube/v3/videos

Check this sample in the YouTube Data API - official documentation.

This is the response of the sample above (you'll see the "duration" property and value):

{
 "kind": "youtube#videoListResponse",
 "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/8jeHCUnghfiSuxYeP5D9KDIE44Q\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 1
 },
 "items": [
  {
   "kind": "youtube#video",
   "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/wMjiWCECcoho_QWk9FLayO8Ipus\"",
   "id": "kJQP7kiw5Fk",
   "contentDetails": {
    "duration": "PT4M42S",
    "dimension": "2d",
    "definition": "hd",
    "caption": "true",
    "licensedContent": true,
    "projection": "rectangular"
   }
  }
 ]
}

This is the code with the modifications I made for get the (videoId and title) values:

// Use your own API KEY here:
var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=5&key=YOUR_API_KEY"

// The example here will search results about "africa":
$.getJSON(url + "&q=africa", function(json) {
  var count = 0;
  var html = "";
  if (json.items) {
    var items = json.items;
    items.forEach(function(item) {

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

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

      // Add the video title and the duration
      // N.B, unfortunately, the "duration" property/value is not available in the response.
      html += '<h2>' + item.snippet.title + ' - Duration: not available in the response</h2></a></p>';
      count++;
    });
  }

  // Add the results in the div called "myDiv".
  document.getElementById('myDiv').innerHTML = html;
})

And the results are as follows:

<div id="myDiv">
  <p>
    <a href="https://youtu.be/FTQbiNvZqaY"><img src="https://i.ytimg.com/vi/FTQbiNvZqaY/default.jpg"></a>
  </p>
  <h2><a href="https://youtu.be/FTQbiNvZqaY">Toto - Africa (Official Music Video) - Duration: N/A</a></h2>
  <p></p>
  <p>
    <a href="https://youtu.be/DWfY9GRe7SI"><img src="https://i.ytimg.com/vi/DWfY9GRe7SI/default.jpg"></a>
  </p>
  <h2><a href="https://youtu.be/DWfY9GRe7SI">Toto Africa Lyrics - Duration: N/A</a></h2>
  <p></p>
  <p>
    <a href="https://youtu.be/mk5Dwg5zm2U"><img src="https://i.ytimg.com/vi/mk5Dwg5zm2U/default.jpg"></a>
  </p>
  <h2><a href="https://youtu.be/mk5Dwg5zm2U">Weezer - Africa (starring Weird Al Yankovic) - Duration: N/A</a></h2>
  <p></p>
  <p>
    <a href="https://youtu.be/pRpeEdMmmQ0"><img src="https://i.ytimg.com/vi/pRpeEdMmmQ0/default.jpg"></a>
  </p>
  <h2><a href="https://youtu.be/pRpeEdMmmQ0">Shakira - Waka Waka (This Time for Africa) (The Official 2010 FIFA World Cup™ Song) - Duration: N/A</a></h2>
  <p></p>
  <p>
    <a href="https://youtu.be/qDLJ3pUZm9A"><img src="https://i.ytimg.com/vi/qDLJ3pUZm9A/default.jpg"></a>
  </p>
  <h2><a href="https://youtu.be/qDLJ3pUZm9A">Toto - Africa (Lyrics on screen) - Duration: N/A</a></h2>
  <p></p>
</div>

来源：https://stackoverflow.com/questions/53160169/output-videoname-and-infos-correctly-after-update-from-youtube-data-api-v2-to-v3

标签

javascript

youtube

youtube-data-api