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

【问题标题】：How to get view count using youtube data api in javascript?如何在 javascript 中使用 youtube data api 获取查看次数？
【发布时间】：2019-07-23 01:28:57
【问题描述】：

我试图使用 Youtube 数据 api -v3 获取一些数据。 data.items.sn-p 中的所有数据都完美呈现。但是，无法检索其余数据，例如 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>

起初 part: 'sn-p,statistics', 这部分就像 part: 'sn-p',

【问题讨论】：

播放列表查询Please Refer和“统计”支持的视频列表查询[视频api链接]（developers.google.com/youtube/v3/docs/videos/list）中似乎统计信息无效。
明白。因此，可以从播放列表中获取视频 id 列表并使用这些 id，我们可以再编写一个代码来获取每个视频的观看次数，但是有没有更简单的方法可以做到这一点？
你可以通过playlist api获取video-id列表，然后将video ids组合并传递给video api，video api支持“多个video id”参数

标签： javascript view youtube-data-api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

通过playlist api (V3)获取video-id列表，然后将video ids组合并传递给video api，video api(V3)支持“多视频id”参数)

Video Api Doc

用例列表（文档中提到

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

【讨论】：