2017-04-05 139 views
12

目標是使用YouTube API創建喜歡/喜歡按鈕。當用戶點擊按鈕時,視頻將保存到用戶喜歡/喜歡的播放列表中。將視頻添加到YouTube上的用戶喜歡/喜歡播放列表

就像它在您自己的網站上實現類似Facebook的按鈕時的工作方式一樣。

這實質上是對我之前的question發佈的奇妙解決方案的後續問題,我們的目標是將視頻添加到「稍後觀看」播放列表。

這個特定功能的工作代碼爲:

<!-- button 1 --> 
<button type="submit" data-youtube-video-id="EH3gqI2NAiE" value="Watch Later" class="ma_youtube_watch_later" name="send"> 
    <div class="ma_youtube_watch_later_text">Watch Later</div> 
</button> 

<!-- button 2 --> 
<button type="submit" data-youtube-video-id="0EMmKIIF-zE" value="Watch Later" class="ma_youtube_watch_later" name="send"> 
    <div class="ma_youtube_watch_later_text">Watch Later</div> 
</button> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script> 
    // By Bertrand Martel: https://stackoverflow.com/a/42561941/1649673 
    var OAUTH2_CLIENT_ID = '28993181493-c9o6hdll3di0ssvebfd4atf13edqfu9g.apps.googleusercontent.com'; 
    var OAUTH2_SCOPES = [ 
    'https://www.googleapis.com/auth/youtube' 
    ]; 
    var init = false; 
    var youtube_video_id = ''; 

    var button = null; 

    googleApiClientReady = function() { 
    gapi.auth.init(function() { 
     window.setTimeout(checkAuth, 1); 
    }); 
    } 

    function checkAuth() { 
    gapi.auth.authorize({ 
     client_id: OAUTH2_CLIENT_ID, 
     scope: OAUTH2_SCOPES, 
     immediate: true 
    }, handleAuthResult); 
    } 
    // Handle the result of a gapi.auth.authorize() call. 
    function handleAuthResult(authResult) { 

    jQuery('.ma_youtube_watch_later').off('click'); 
    jQuery('.ma_youtube_watch_later').click(function(e) { 

     button = this; 

     var youtube_video_id = jQuery(this).attr("data-youtube-video-id"); 

     // Add a video ID specified in the form to the playlist. 
     function addVideoToPlaylist() { 
     //addToPlaylist(jQuery('#video-id').val()); 
     addToPlaylist(youtube_video_id); 
     } 

     if (authResult && !authResult.error) { 
     addVideoToPlaylist(); 
     } else { 
     init = true; 
     gapi.auth.authorize({ 
      client_id: OAUTH2_CLIENT_ID, 
      scope: OAUTH2_SCOPES, 
      immediate: false 
     }, handleAuthResult); 
     } 
     return false; 
    }); 

    if (authResult && !authResult.error) { 
     // Authorization was successful. Hide authorization prompts and show 
     // content that should be visible after authorization succeeds. 
     jQuery('.pre-auth').hide(); 
     jQuery('.post-auth').show(); 
     loadAPIClientInterfaces(); 

     jQuery('#add_to_wl').click(function(e) { 

     button = this; 

     addVideoToPlaylist(self); 
     }); 
    } 
    } 

    function loadAPIClientInterfaces() { 
    gapi.client.load('youtube', 'v3', function() { 
     if (init) { 
     init = false; 
     addVideoToPlaylist(); 
     } 
    }); 
    } 

    // Add a video to a playlist. The "startPos" and "endPos" values let you 
    // start and stop the video at specific times when the video is played as 
    // part of the playlist. However, these values are not set in this example. 
    function addToPlaylist(id, startPos, endPos) { 
    var details = { 
     videoId: id, 
     kind: 'youtube#video' 
    } 
    if (startPos != undefined) { 
     details['startAt'] = startPos; 
    } 
    if (endPos != undefined) { 
     details['endAt'] = endPos; 
    } 
    var request = gapi.client.youtube.playlistItems.insert({ 
     part: 'snippet', 
     resource: { 
     snippet: { 
      playlistId: "WL", 
      resourceId: details 
     } 
     } 
    }); 

    request.execute(function(response) { 
     console.log(response); 
     if (!response.code) { 
     //jQuery('#status').html('<pre>Succesfully added the video : ' + JSON.stringify(response.result) + '</pre>'); 

     // change button text 
     $(button).text('Video added'); 

     } else if (response.code == 409) { 

     //jQuery('#status').html('<p>Conflict : this video is already on your Watch Later playlist</p>'); 

     // change button text 
     $(button).text('Already added'); 

     } else if (response.code == 404) { 
     //jQuery('#status').html('<p>Not Found : this video hasnt been found</p>'); 

     // change button text 
     $(button).text('Video not found'); 

     } else { 
     //jQuery('#status').html('<p>Error : code ' + response.code + '</p>'); 

     // change button text 
     $(button).text('Error: Try again'); 

     } 
    }); 
    } 

</script> 
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script> 

,我們手頭上的API文檔的一些PHP code samples。我們也有一些關於adding a video to playlist的文檔。

這是如何使用PHP或/和JavaScript實現的?

回答

12

你可以找到像與下列參數頻道列表端點&喜歡的播放列表ID(檢查this sample request):

{ 
    mine: true, 
    part: 'contentDetails' 
} 

您將獲得relatedPlaylists包括likesfavoritesuploadswatch later播放列表, watch history

{ 
    "kind": "youtube#channelListResponse", 
    "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/S1x68O9aSpvmndklrnSwKw_yYdE\"", 
    "pageInfo": { 
     "totalResults": 1, 
     "resultsPerPage": 1 
    }, 
    "items": [{ 
     "kind": "youtube#channel", 
     "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/ura_vsrPt5tCZkjjGbH3ihN3Bq4\"", 
     "id": "UCnQt5EmYRfX1uVYtwPNj7Dg", 
     "contentDetails": { 
      "relatedPlaylists": { 
       "likes": "LLnQt5EmYRfX1uVYtwPNj7Dg", 
       "favorites": "FLnQt5EmYRfX1uVYtwPNj7Dg", 
       "uploads": "UUnQt5EmYRfX1uVYtwPNj7Dg", 
       "watchHistory": "HL", 
       "watchLater": "WL" 
      } 
     } 
    }] 
} 

對於WatchLater & WatchHistory,該playlistId是爲所有用戶(分別爲WL & HL)

你可以調用Javascript中的頻道列表端點gapi.client.youtube.channels.list同樣的方式一樣,你打過電話的播放列表插入API。

然後,使用playlistId,您可以將視頻插入另一個播放列表,而不是稍後觀看。

在下面的代碼,你會發現3個按鈕不同的視頻添加到Watch Later播放列表,Like播放& Favorite播放列表


的Javascript

Here是現場演示與source code(如下)

Here是小提琴。更換你的客戶端ID並添加爲授權的JavaScript起源於開發者控制檯:與自己的客戶端ID

在API響應https://fiddle.jshell.net

<!doctype html> 
<html> 

<head> 
    <title>Add to multiple playlists</title> 
</head> 

<body> 
    <input type="submit" data-youtube-video-id="EH3gqI2NAiE" data-type="WL" value="Add to Watch Later playlist" class="yt_add_to_playlist" /> 
    <input type="submit" data-youtube-video-id="0EMmKIIF-z" data-type="likes" value="Add to Like playlist" class="yt_add_to_playlist" /> 
    <input type="submit" data-youtube-video-id="T4ZE2KtoFzs" data-type="favorites" value="Add to Favorite playlist" class="yt_add_to_playlist" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script> 
    var OAUTH2_CLIENT_ID = '28993181493-c9o6hdll3di0ssvebfd4atf13edqfu9g.apps.googleusercontent.com'; 
    var OAUTH2_SCOPES = [ 
     'https://www.googleapis.com/auth/youtube' 
    ]; 
    var init = false; 
    var button = null; 

    googleApiClientReady = function() { 
     gapi.auth.init(function() { 
      window.setTimeout(checkAuth, 1); 
     }); 
    } 

    function checkAuth() { 
     gapi.auth.authorize({ 
      client_id: OAUTH2_CLIENT_ID, 
      scope: OAUTH2_SCOPES, 
      immediate: true 
     }, handleAuthResult); 
    } 

    // Handle the result of a gapi.auth.authorize() call. 
    function handleAuthResult(authResult) { 

     jQuery('.yt_add_to_playlist').off('click'); 
     jQuery('.yt_add_to_playlist').click(function(e) { 

      button = this; 

      if (authResult && !authResult.error) { 
       addToPlaylist($(this).attr("data-youtube-video-id"), $(this).attr("data-type")); 
      } else { 
       init = true; 
       gapi.auth.authorize({ 
        client_id: OAUTH2_CLIENT_ID, 
        scope: OAUTH2_SCOPES, 
        immediate: false 
       }, handleAuthResult); 
      } 
      return false; 
     }); 

     if (authResult && !authResult.error) { 
      // Authorization was successful. Hide authorization prompts and show 
      // content that should be visible after authorization succeeds. 
      jQuery('.pre-auth').hide(); 
      jQuery('.post-auth').show(); 
      loadAPIClientInterfaces(); 

      jQuery('#add_to_wl').click(function(e) { 
       button = this; 
       addToPlaylist($(this).attr("data-youtube-video-id"), $(this).attr("data-type")); 
      }); 
     } 
    } 

    function loadAPIClientInterfaces() { 
     gapi.client.load('youtube', 'v3', function() { 
      if (init) { 
       init = false; 
       addToPlaylist($(button).attr("data-youtube-video-id"), $(button).attr("data-type")); 
      } 
     }); 
    } 

    function addToPlaylist(videoId, playlistType) { 

     console.log("add to playlist type : " + playlistType); 

     if (playlistType != "WL" && playlistType != "HL") { 

      var request = gapi.client.youtube.channels.list({ 
       mine: true, 
       part: 'contentDetails' 
      }); 

      request.execute(function(response) { 
       var playlistId = response.result.items[0].contentDetails.relatedPlaylists[playlistType]; 

       if (typeof playlistId != 'undefined') { 
        console.log("found playlist id : " + playlistId); 
        insertToPlaylist(videoId, playlistId); 
       } else { 
        console.log("playlist not found"); 
       } 

      }); 

     } else { 
      insertToPlaylist(videoId, playlistType); 
     } 
    } 

    function insertToPlaylist(videoId, playlistId) { 

     var details = { 
      videoId: videoId, 
      kind: 'youtube#video' 
     }; 
     var request = gapi.client.youtube.playlistItems.insert({ 
      part: 'snippet', 
      resource: { 
       snippet: { 
        playlistId: playlistId, 
        resourceId: details 
       } 
      } 
     }); 

     request.execute(function(response) { 
      console.log(response); 
      if (!response.code) { 
       $(button).val('Video added'); 
      } else if (response.code == 409) { 
       $(button).val('Already added'); 
      } else if (response.code == 404) { 
       $(button).val('Video not found'); 
      } else { 
       $(button).val('Error: Try again'); 
      } 
     }); 
    } 
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script> 
</body> 

</html> 

更換OAUTH2_CLIENT_ID,狀態代碼的情況下,檢查視頻未找到(404)。返回的409狀態代碼,如果該視頻已經在播放列表中,但僅適用於稍後觀看播放清單(加入現有的視頻喜歡/喜歡的播放列表,雖然不會改變任何東西)


PHP

同像以前一樣,基於google-api php sample

  • 安裝作曲:看instructions
  • 安裝谷歌的API客戶端:

    composer require google/apiclient:~2.0 
    

PHP腳本multi-playlist.php

<?php 
/** 
* Library Requirements 
* 
* 1. Install composer (https://getcomposer.org) 
* 2. On the command line, change to this directory (api-samples/php) 
* 3. Require the google/apiclient library 
* $ composer require google/apiclient:~2.0 
*/ 
if (!file_exists(__DIR__ . '/vendor/autoload.php')) { 
    throw new \Exception('please run "composer require google/apiclient:~2.0" in "' . __DIR__ .'"'); 
} 
require_once __DIR__ . '/vendor/autoload.php'; 
session_start(); 

$response = ""; 

/* 
* You can acquire an OAuth 2.0 client ID and client secret from the 
* {{ Google Cloud Console }} <{{ https://cloud.google.com/console }}> 
* For more information about using OAuth 2.0 to access Google APIs, please see: 
* <https://developers.google.com/youtube/v3/guides/authentication> 
* Please ensure that you have enabled the YouTube Data API for your project. 
*/ 
$OAUTH2_CLIENT_ID = 'YOUR_CLIENT_ID'; 
$OAUTH2_CLIENT_SECRET = 'YOUR_CLIENT_SECRET'; 

$client = new Google_Client(); 
$client->setClientId($OAUTH2_CLIENT_ID); 
$client->setClientSecret($OAUTH2_CLIENT_SECRET); 
$client->setScopes('https://www.googleapis.com/auth/youtube'); 

$redirect = filter_var('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'], 
    FILTER_SANITIZE_URL); 

$client->setRedirectUri($redirect); 
// Define an object that will be used to make all API requests. 
$youtube = new Google_Service_YouTube($client); 
// Check if an auth token exists for the required scopes 
$tokenSessionKey = 'token-' . $client->prepareScopes(); 
if (isset($_GET['code'])) { 
    if (strval($_SESSION['state']) !== strval($_GET['state'])) { 
    die('The session state did not match.'); 
    } 
    $client->authenticate($_GET['code']); 
    $_SESSION[$tokenSessionKey] = $client->getAccessToken(); 
    header('Location: ' . $redirect); 
} 
if (isset($_SESSION[$tokenSessionKey])) { 
    $client->setAccessToken($_SESSION[$tokenSessionKey]); 
} 
// Check to ensure that the access token was successfully acquired. 

if ($client->getAccessToken()) { 
    try { 

    $videoId = ""; 

    if (isset($_GET['video'])){ 
     $videoId = $_GET['video']; 
    } 
    else if(isset($_SESSION['video'])){ 
     $videoId = $_SESSION['video']; 
    } 

    if (isset($_GET['action'])){ 
     $action = $_GET['action']; 
    } 
    else if(isset($_SESSION['action'])){ 
     $action = $_SESSION['action']; 
    } 

    if(isset($videoId) && isset($action) && !isset($_GET['state'])) { 

     file_put_contents('php://stderr', print_r("adding video to watch later playlist " . $videoId . "\n", TRUE)); 

     if ($action == "Add to Watch Later playlist") { 
     $playlistId = "WL"; 
     } 
     else { 
      $listResponse = $youtube->channels->listChannels("contentDetails", array(
       'mine' => true 
     )); 

      if (!empty($listResponse)) { 
      if ($action == "Add to Like playlist"){ 
       $playlistId = $listResponse['items'][0]['contentDetails']['relatedPlaylists']['likes']; 
      } 
      else if ($action == "Add to Favorite playlist"){ 
       $playlistId = $listResponse['items'][0]['contentDetails']['relatedPlaylists']['favorites']; 
      } 
      } 
     } 

     if (isset($playlistId)){ 

     // 5. Add a video to the playlist. First, define the resource being added 
     // to the playlist by setting its video ID and kind. 
     $resourceId = new Google_Service_YouTube_ResourceId(); 
     $resourceId->setVideoId($videoId); 
     $resourceId->setKind('youtube#video'); 

     // Then define a snippet for the playlist item. Set the playlist item's 
     // title if you want to display a different value than the title of the 
     // video being added. Add the resource ID and the playlist ID retrieved 
     // in step 4 to the snippet as well. 
     $playlistItemSnippet = new Google_Service_YouTube_PlaylistItemSnippet(); 
     $playlistItemSnippet->setTitle('First video in the test playlist'); 
     $playlistItemSnippet->setPlaylistId($playlistId); 
     $playlistItemSnippet->setResourceId($resourceId); 
     // Finally, create a playlistItem resource and add the snippet to the 
     // resource, then call the playlistItems.insert method to add the playlist 
     // item. 
     $playlistItem = new Google_Service_YouTube_PlaylistItem(); 
     $playlistItem->setSnippet($playlistItemSnippet); 

     $playlistItemResponse = $youtube->playlistItems->insert(
      'snippet,contentDetails', $playlistItem, array()); 

     $response = json_encode($playlistItem); 
     } 
     else{ 
     $response = "no playlist selected"; 
     } 

     $_SESSION['video'] = ""; 
     $_SESSION["action"] = ""; 
    } 
    else{ 
    file_put_contents('php://stderr', print_r("no video was specified", TRUE)); 
    } 

    } catch (Google_Service_Exception $e) { 
    $response = htmlspecialchars($e->getMessage()); 
    } catch (Google_Exception $e) { 
    $response = htmlspecialchars($e->getMessage()); 
    } 
    $_SESSION[$tokenSessionKey] = $client->getAccessToken(); 
} else { 

    if(isset($_GET['video'])){ 

    $_SESSION["video"] = $_GET['video']; 
    $_SESSION["action"] = $_GET['action']; 

    // If the user hasn't authorized the app, initiate the OAuth flow 
    $state = mt_rand(); 
    $client->setState($state); 
    $_SESSION['state'] = $state; 
    $authUrl = $client->createAuthUrl(); 
    header('Location: ' . $authUrl); 
    } 
} 
?> 

<!doctype html> 
<html> 
<head> 
<title>Add to playlists</title> 
</head> 
<body> 
    <div> 
     <form id="form" action="multi-playlist.php""> 
      <input type="hidden" name="video" value="EH3gqI2NAiE"> 
      <input name="action" type="submit" value="Add to Watch Later playlist" /> 
      <input name="action" type="submit" value="Add to Like playlist" /> 
      <input name="action" type="submit" value="Add to Favorite playlist" /> 
     </form> 
     <div> 
      <?php echo $response ?> 
     </div> 
    </div> 
</body> 
</html> 

對於這個版本的PHP,請注意,除了在當前會話$_SESSION["video"]視頻ID,目標行動也存儲在$_SESSION["action"]到能夠確定使用哪個播放列表。播放列表使用頻道列表端點$youtube->channels->listChannels進行檢索。


注意,它可能需要一些時間的視頻出現在播放列表(有時幾秒鐘)

+2

讚美你採取拼湊了一起的時候,謝謝。我將在本週進行測試。我有一個問題。是否可以同時將視頻添加到多個播放列表?例如,在類型數據屬性值中,我們添加了一個類似'data-type =「WL的數組,並將視頻添加到這些播放列表中。不確定YouTube是否有某種形式的屏蔽。 –

+0

我不這麼認爲,[播放列表插入端點](https://developers.google.com/youtube/v3/docs/playlistItems/insert)沒有實現批量插入(對於'playlistId需要一個對象'字段,使用數組時只考慮第一項)。您需要連續播放兩次播放列表插入電話 –

+0

非常感謝您的解釋。過去幾天我一直失活,並沒有設法按時獎勵這筆獎金。我通過[這個元線程](https://meta.stackoverflow.com/questions/348322/missed-rewarding-a-bounty-on-time)向社區伸出了援助之手,並希望能讓你獲得剩餘的點數!另外,我應該注意到我沒有在我的本地環境中測試這個代碼(本週晚些時候會這樣做),但是根據您之前的回答判斷,它肯定會相應地起作用。 –

相關問題