youtube api v3에서 검색 한 동영상 재생

Question

Youtube API V3을 사용하여 사용자 활동 피드 (API의 activities 목록 사용)에서 동영상의 미리보기 이미지를 추출 할 수 있습니다.

사용자가 동영상을 클릭하면 동영상을 재생해야합니다. 나는 iframe을 보았다. 그러나 API의 활동 목록에는 비디오의 URL을 가져 오는 방법이 나와 있지 않지만 Videos 리소스에는 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); 
} 

Answer 1

활동 목록이 여러 활동 유형이 포함

업로드, 같은, 좋아하는, 코멘트, 구독을, playlistItem는, 추천, 게시판, 사회 ..

및 활동의 일부 종류의 관련입니다 동영상. 그런 다음 활동 유형이 동영상과 관련된 경우에만 contentDetails에서 videoId를 검색 할 수 있습니다. videoId를 사용하여 동영상을 표시 할 수 있습니다.

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

당신은 "유튜브 주제 탐색기"의 좋은 예있다. 이 응용 프로그램에서 당신은 사회 활동을 검색 할 수 및 활동

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

이런 종류의에서 videoId가를 검색하고 비디오 표시하는 방법의 예를 가지고 :

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