Question

使用Youtube API V3，我可以从用户的活动源中提取视频的缩略图（使用api中的activities列表）。

我想要实现的是，当用户点击视频时，应该播放视频。我看过iframe。然而，api上的活动列表没有显示如何获取视频的URL，但是Videos资源显示了一个不同的播放器，然后我很困惑，如何将它集成到我的代码中。

    var activityId, nextPageToken, prevPageToken, videoSnippet;

// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
  requestUserUploadsactivityId();
}

//Retrieve the uploads playlist id.
function requestUserUploadsactivityId() {
  // https://developers.google.com/youtube/v3/docs/channels/list
  var request = gapi.client.youtube.activities.list({
    // mine: '' indicates that we want to retrieve the channel for the authenticated user.
    home: 'true',
    part: 'snippet'
  });
  request.execute(function(response) {
    //structure of content.details
    //https://developers.google.com/youtube/v3/docs/channels#resource
    console.log(response);
    activityId = response.items[0].id;
    requestVideoPlaylist(activityId);
  });
}

// Retrieve a playist of videos.
function requestVideoPlaylist(home, pageToken) {
  $('#video-container').html('');
  var requestOptions = {
    home: 'true',
    part: 'snippet',
    maxResults: 12
  };
  if (pageToken) {
    requestOptions.pageToken = pageToken;
  }
  var request = gapi.client.youtube.activities.list(requestOptions);
  request.execute(function(response) {


    var activityItems = response.result.items;
    if (activityItems) {
      // For each result lets show a thumbnail.
      jQuery.each(activityItems, function(index, item) {
        createDisplayThumbnail(item.snippet);

      });
    } else {
      $('#video-container').html('Sorry you have no activities on your feed');
    }
  });
}


// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
  var titleEl = $('<h4>');
  titleEl.addClass('video-title');
  $(titleEl).html(videoSnippet.title);
  var thumbnailUrl = videoSnippet.thumbnails.default.url;
   console.log(videoSnippet);
  var div = $('<div>');
  div.addClass('video-content');
  div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
  div.append(titleEl);
  $('#video-container').append(div);
}

Answer 1

活动列表包括几种活动类型：

上传，喜欢，评论，评论，播放列表，推荐，公告，社交..

并且只有某种活动与视频相关。然后，当活动类型与视频相关时，您只能从contentDetails中检索videoId。您可以使用videoId显示视频。

https://developers.google.com/youtube/v3/docs/activities

你在“YouTube主题资源管理器”中有一个很好的例子。在此应用程序中，您可以检索社交活动并从此类活动中检索videoId

https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/logged-in.js

$scope.social = function() {
    $rootScope.topicResults = [];
    $rootScope.spinner.spin($('#spinner')[0]);

        youtube({
          method: 'GET',
          service: 'activities',
          params: {
                part: 'id,snippet,contentDetails',
                home: true,
                maxResults: constants.YOUTUBE_API_MAX_RESULTS
          },
          callback: function(response) {
                  if ('items' in response) {
                          $scope.videoIds = [];
                          $scope.personalizedTopics = [];
                          angular.forEach(response.items, function(activity) {
                                if ((activity.snippet.type == constants.SOCIAL_TYPE)&&(activity.contentDetails.social.resourceId.videoId)){
                                        $scope.videoIds.push(activity.contentDetails.social.resourceId.videoId);
                                }
                          });
                  }
                  getTopicsForVideoIds();
          }
        });
  }

您有一个如何显示视频的示例：

https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js

 function playVideo(container, videoId) {
    var width = container.offsetWidth;
    var height = container.offsetHeight;

    new YT.Player(container, {
      videoId: videoId,
      width: width,
      height: height,
      playerVars: {
        autoplay: 1,
        controls: 2,
        modestbranding: 1,
        rel: 0,
        showInfo: 0
      }
    });

播放从youtube api v3中检索到的视频

1 个答案: