2017-04-05 15 views
12

YouTube APIを使用してお気に入り/好きなボタンを作成するのが目的です。ユーザーがボタンをクリックすると、ビデオはユーザーのお気に入り/お気に入り再生リストに保存されます。YouTubeのお気に入りの/お気に入りのプレイリストに動画を追加

自分のサイトにFacebookのようなボタンを実装したときの動作と似ています。

これは私の以前のquestionBertrand Martelによって投稿された素晴らしい解決策へのフォローアップの質問です。ここでは、後で再生リストにビデオを追加することを目指していました。

この特定の機能のための作業コードは次のとおりです。

<!-- 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

あなたは、以下のパラメータ(this sample requestを確認してください)とチャンネルリストのエンドポイントとの&お気に入りのプレイリストIDと同じように見つけることができます:あなたはlikesfavoritesuploads含むrelatedPlaylistsでプレイリストのリストを取得します

{ 
    mine: true, 
    part: 'contentDetails' 
} 

watch laterwatch history。 WatchLater & WatchHistoryについては

{ 
    "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" 
      } 
     } 
    }] 
} 

、playlistIdは(それぞれWL & HL)、すべてのユーザーに対して同じである

あなたがプレイリストと呼ばれてきたのと同じ方法gapi.client.youtube.channels.listとJavaScriptでチャンネルリストエンドポイントを呼び出すことができますAPIを挿入します。

次に、プレイリストIDを使用して、動画を後で再生する以外のプレイリストに挿入できます。次のコードで

、あなたは(

Heresource codeとライブデモでWatch Laterプレイリスト、Likeプレイ& Favoriteプレイリストに


Javascriptを別のビデオを追加する3つのボタンがあります以下のように)

Hereはフィドルです。あなたのクライアントIDを交換し、デベロッパーコンソールの正規JavaScriptの起源として追加: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> 

は、APIレスポンスでは、独自のクライアントID

OAUTH2_CLIENT_IDを交換し、ステータスコードは、ビデオが見つからない場合にはチェックされています(404)。409ステータスコードは、ビデオが再生リストに既にあるが、唯一の時計、後でプレイリストの場合に返される(既存のビデオを追加する/お気に入りのプレイリストを好きにかかわらず、何も変更されません)


PHP

同じに前と同じように、google-api php sampleに基づいて:参照instructions

  • グーグル-APIクライアントをインストールします:

    • 作曲インストール

      composer require google/apiclient:~2.0 
      

    PHPスクリプトmulti-playlist.php:この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> 
    

    、現在のセッション$_SESSION["video"]における動画IDに加えて、ターゲット・アクションをも$_SESSION["action"]に格納されていることに注意してくださいどのプレイリストを使用するかを決定できます。プレイリストは、$youtube->channels->listChannelsのチャンネルリストエンドポイントで取得されます。


    ビデオがプレイリストに表示されるため、それには時間がかかることがあります(ときには数秒)

  • +2

    は、一緒にこれをピースに時間を割いてあなたを賛美ありがとう。私は今週テストするつもりです。一つの質問があります。同時に複数のプレイリストにビデオを追加することはできますか?例では、型データの属性値に 'data-type =" WL、like "というような配列を追加し、それらのプレイリストにビデオを追加します。 YouTubeが何らかの形でこれをブロックしているかどうかは不明です。 –

    +0

    私はそうは思わない、[playlist insert endpoint](https://developers.google.com/youtube/v3/docs/playlistItems/insert)は一括挿入を実装していない(オブジェクトは 'playlistId 'フィールド、配列を使うときは、最初の項目だけが考慮されます)。 2つの連続したプレイリストインサートコールを行う必要があります –

    +0

    ありがとうございます。私は過去数日を非活性化しており、この賞金を時間通りに報酬することはできませんでした。私は[このメタスレッド](https://meta.stackoverflow.com/questions/348322/missed-rewarding-a-bounty-on-time)を介してコミュニティに連絡し、残っている点をお手伝いします!また、私は自分のローカル環境でこのコードをテストしていないことに注意してください(これは今週末に行う予定です)。以前の回答で判断すると、それに応じて機能するでしょう。 –

    関連する問題