如何使用 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,statistics',这部分就像部分: 'snippet',

Answer 1

使用playlist api (V3)获取video-id列表，然后组合video ids传给video api, "Mulitple video id" 视频中支持的参数 api (V3)

Video Api Doc

用例列表（在文档中提到

列表（按视频 ID）
列表（多个视频 ID）
列表（最受欢迎的视频）
列表（我喜欢的视频）

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

如何使用 javascript 中的 youtube 数据 api 获取观看次数？

How to get view count using youtube data api in javascript?

javascript

view

youtube-data-api