Как получить количество просмотров с помощью API данных YouTube в javascript?

Я пытался получить некоторые данные, используя Youtube data api -v3. Все данные внутри data.items.snippet поступают отлично. Но остальные данные, например data.items[0].statistics.viewCount, получить невозможно. Вот мой код:

<script src = "https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script>
$(document).ready(function () {

  var key = 'MY_API_KEY';
  var playlistId = 'PL6Oh0ejUo_0jJlgikR5CNH38O9NE5JDbK';
  var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';

  var options = {
      part: 'snippet,statistics',
      key: key,
      maxResults: 20,
      playlistId: playlistId
  }

  loadVids();

  function loadVids() {
      $.getJSON(URL, options, function (data) {
          var id = data.items[0].snippet.resourceId.videoId;
          mainVid(id);
          resultsLoop(data);
      });
  }

  function mainVid(id,c) {
      $('#video').html(`
        <iframe width = "420" height = "250" src = "https://www.youtube.com/embed/${id}" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen></iframe>
      `);
  }


  function resultsLoop(data) {

      $.each(data.items, function (i, item) {
          var c = item.contentDetails.duration;

          var thumb = item.snippet.thumbnails.medium.url;
          var title = item.snippet.title;
          var desc = item.snippet.description.substring(0, 120);
          var vid = item.snippet.resourceId.videoId;


          $('main').append(`
            <article class = "item" data-key = "${vid}">

              <img src = "${thumb}" alt = "" class = "thumb">
              <div class = "details">
                <h4>${title}</h4>
                <p>${desc}</p>
                                <p>${published_at}</p>
                                <p>${c}</p>
              </div>

            </article>
          `);
      });
  }

  // CLICK EVENT
  $('main').on('click', 'article', function () {
      var id = $(this).attr('data-key');
      mainVid(id);
  });

});
</script>

Сначала часть: 'фрагмент,статистика', эта часть была похожа на часть: 'фрагмент',

Похоже, статистика не является допустимой частью запроса плейлиста Пожалуйста, обратитесь, а «статистика» поддерживает запрос списка видео [ссылка API видео] (Developers.google.com/youtube/v3/docs/videos/list) .

Satheesh 01.03.2019 05:53

Понял. Итак, можно получить список идентификаторов видео из списка воспроизведения и, используя этот идентификатор, мы можем сделать еще один код, чтобы получить количество просмотров каждого видео, но есть ли более простой способ сделать это?

Tazwar Utshas 01.03.2019 07:07

Вы можете получить список идентификаторов видео с помощью API списка воспроизведения, затем объединить идентификаторы видео и передать их в API видео, параметр «Mulitple video id», поддерживаемый в API видео.

Satheesh 01.03.2019 07:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
1 330
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Получите список идентификаторов видео с помощью API-интерфейс плейлиста (V3), затем объедините идентификаторы видео и передайте их в API видео, Параметр «Mulitple video id» поддерживается в API видео (V3)

Видео апи док

Список вариантов использования (упоминается в док.

  1. список (по идентификатору видео)
  2. список (несколько идентификаторов видео)
  3. список (самые популярные видео)
  4. список (мои понравившиеся видео)
Ответ принят как подходящий

Наконец-то я смог это решить. Код выглядит следующим образом:

$(document).ready(function () {

  var key = 'ENTER_YOUR_KEY';
  var playlistId = 'ENTER_YOUR_PLAYLIST_ID';
  var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
    var URL2 = 'https://www.googleapis.com/youtube/v3/videos'

  var options = {
      part: 'snippet',
      key: key,
      maxResults: 20,
      playlistId: playlistId
  }

  loadVids();

  function loadVids() {
      $.getJSON(URL, options, function (data) {
          var id = data.items[0].snippet.resourceId.videoId;
          mainVid(id);
          resultsLoop(data);
      });
  }

//THIS FUNCTION WILL USE THE VIDEO ID FROM PREVIOUS API CALL AND RETRIEVE VIEW COUNT
      function view_count(vid) {
            var opt = {
                    part: 'statistics',
                    key: key,
                    id: vid,
            }
            var vc = null;

          $.getJSON(URL2, opt, function (data) {
              vc = data.items[0].statistics.viewCount;
                            $('#'+vid).append(`<p>Views: ${vc}</p>`);
          });
      }

  function mainVid(id) {
      $('#video').html(`
        <iframe width = "420" height = "250" src = "https://www.youtube.com/embed/${id}" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen></iframe>
      `);
  }


  function resultsLoop(data) {

      $.each(data.items, function (i, item) {

          var thumb = item.snippet.thumbnails.medium.url;
          var title = item.snippet.title;
          var desc = item.snippet.description.substring(0, 70);
          var vid = item.snippet.resourceId.videoId;
                    var view = view_count(vid); //CALL FOR VIEWS
                    console.info(view);


          $('main').append(`
            <article class = "item" data-key = "${vid}">

              <img src = "${thumb}" alt = "" class = "thumb">
              <div class = "details" id = "${vid}">
                <b>${title}</b>
                <p>${desc}</p>
              </div>

            </article>
          `);
      });
  }

Другие вопросы по теме