如何在javascript中使用youtube数据api获取查看次数？

Question

我试图使用Youtube数据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>

在第一部分：'片段，统计'，这部分就像是：'snippet'，

Answer 1

使用播放列表api（V3）获取视频ID列表，然后组合视频ID并将其传递给视频api，视频api支持“Mulitple video id”参数（V3）

Video Api Doc

用例列表（在文档中提到）

1. 列表（按视频ID）
2. 列表（多个视频ID）
3. 列表（最受欢迎的视频）
4. 列表（我喜欢的视频）

Answer 2

我终于可以解决了。代码如下：

$(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.log(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>
          `);
      });
  }