Youtube api 播放从youtube api v3检索的视频

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

我试图实现的是，当用户点击视频时，视频应该被播放。我看过iframes。然而，api上的活动列表并没有显示如何获取视频的url，但另一个不同的资源显示了player.embedHtml字段，然而我很困惑，如何将其集成到我的代码中

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

var activityId、nextPageToken、prevPageToken、视频片段；
//加载api后，调用函数获取上传的播放列表id。
函数handleAPILoaded（）{
requestUserUploadsactivityId（）；
}
//检索上载的播放列表id。
函数requestUserUploadsactivityId（）{
// https://developers.google.com/youtube/v3/docs/channels/list
var request=gapi.client.youtube.activities.list({
//我的：“”表示我们要检索经过身份验证的用户的通道。
家：“真的”，
部分：“代码片段”
});
请求.执行（函数（响应）{
//内容结构。详细信息
//https://developers.google.com/youtube/v3/docs/channels#resource
控制台日志（响应）；
activityId=response.items[0].id；
请求视频播放列表（activityId）；
});
}
//检索视频的播放者。
功能请求视频播放列表（主页、pageToken）{
$（'#视频容器'）.html（''）；
var请求选项={
家：“真的”，
部分：'代码片段'，
最大结果：12
};
如果（pageToken）{
requestOptions.pageToken=pageToken；
}
var request=gapi.client.youtube.activities.list（requestOptions）；
请求.执行（函数（响应）{
var activityItems=response.result.items；
if（活动项目）{
//对于每个结果，让我们显示一个缩略图。
每个（活动项，函数（索引，项）{
createDisplayThumbnail（item.snippet）；
});
}否则{
$（'#video container'）.html（'抱歉，您的提要上没有任何活动'）；
}
});
}
//为视频片段创建缩略图。
函数createDisplayThumbnail（视频片段）{
var titleEl=$（''）；
titleEl.addClass（“视频标题”）；
$（titleEl.html（videoSnippet.title）；
var thumbnailUrl=videoSnippet.thumbnails.default.url；
console.log（视频片段）；
var div=$（''）；
div.addClass（“视频内容”）；
css（'backgroundImage'，'url（'+thumbnailUrl+'）；
附加分部（标题级）；
$（“#视频容器”）.append（div）；
}

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

上传，如，收藏，评论，订阅，播放项目，推荐，公告，社交

只有一些活动与视频有关。然后，只有当活动类型与视频相关时，才能从contentDetails检索videoId。您可以使用videoId显示视频

在“YouTube主题浏览器”中有一个很好的例子。在此应用程序中，您可以检索社交活动，并从此类活动中检索视频ID

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

---

! 非常感谢，有这方面的演示吗？还有getTopicsForvideoIds（）方法做什么？它看起来有点复杂。检查这个项目是的，它有点复杂，因为它展示了如何将freebase API与YouTube数据API集成

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

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