Правильно выводите видео и информацию после обновления с API данных YouTube до версии v3. - PullRequest
Новая
       39

Правильно выводите видео и информацию после обновления с API данных YouTube до версии v3.

0 голосов
/ 05 ноября 2018

Надеюсь, у некоторых из вас уже есть опыт решения этой проблемы. После обновления с YouTube данных Api v2 до v3 у меня возникла проблема с выводом миниатюр, имен и продолжительности видео. Надеюсь, что есть простой способ, на самом деле он дает мне только текст с undefiened и в ссылках, которые показывает объект вверх. пока этот код действительно нуждается в помощи, спасибо. 

 // 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 Ответ

0 голосов
/ 05 января 2019

Вам нужно всего лишь сделать несколько изменений:

  • Вместо (item.title) используйте (item.snippet.title) .
  • Вместо (item.id) используйте (item.id.videoId) .
  • К сожалению, свойство / значение duration недоступно в ответе.

Если вы хотите "продолжительность" видео, вы должны использовать (Видео) API.

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

Проверьте этот пример в API данных YouTube - официальная документация .

Это ответ из приведенного выше примера (вы увидите свойство и значение duration) : 

{
 "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"
   }
  }
 ]
}

Это код с изменениями, которые я сделал для получения значений (videoId и title): 

// 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;
})

И результаты таковы: 

<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>
...