YoshinoriKobayashi/150206_wp_moku_YouTube_API.php

## 150206_wp_moku_YouTube_API.php
/****************************************************************************
指定したキーワードで、Youtube動画を検索して、もっとも近い動画を再生したい。
動画の再生は、サイト内で行いたい。

デモサイトはこちら
http://ticklecode.com/present/150206_wp_moku_YouTube_API/

******************************************************************************/


<!DOCTYPE html>
<html>
  <body>

<?php
/****************************************************
全体の説明
https://developers.google.com/youtube/v3/?hl=ja

APIkeyの場所
https://console.developers.google.com/project/861922253482/apiui/credential

パラメタなど
https://developers.google.com/youtube/v3/getting-started?hl=ja

Searchパラメタ
https://developers.google.com/youtube/v3/docs/search/list?hl=ja

Data API (V2)プロトコル - API クエリ パラメータ
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters?hl=ja

******************************************************/

$baseurl = "https://www.googleapis.com/youtube/v3/search?part=snippet";

// 検索したいキーワード
// リクエストにブール型演算子の NOT（-）と OR（|）を使って、動画を除外したり、複数の検索キーワードのいずれかに関連する動画を検索したりすることもできる。
// $en_name = "世界遺産+-BEST30";
$en_name = "Mont Saint-Michel";

// 検索クエリ　テキストをエンコードする
$prm_q = urlencode($en_name);

// API KEY
$prm_key = "My API Key";

$prm_max = 5;        // 最大件数

// order パラメータには、API レスポンス内のリソースの並べ替え方法を指定します。デフォルト値は SEARCH_SORT_RELEVANCE です。
// $prm_order = "relevance ";

// type パラメータは、検索クエリの対象を特定のタイプのリソースのみに制限します。
$prm_type = "video";

$url = "$baseurl&q=$prm_q&key=$prm_key&maxResults=$prm_max&type=$prm_type";

// リクエストして、jsonを取得
$json = file_get_contents($url);

// JSONをPHPオブジェクトに格納
$youtube = json_decode($json);

// １件目のyoutubeのIDを取得
$video_id = $youtube->items[0]->id->videoId;


?>

<h1>Youtube Data API Version 3 Sample</h1>
    <h2>世界遺産　Mont Saint-Mchel  モン・サン＝ミシェル</h2>

    <p>キーワードを指定して、動画情報を取得。</p>
    <p>動画情報の取得には、Youtube Data APIを使う。</p>
    <p>取得した情報で、YouTube Player APIを使って動画を再生。</p>

<?php
/*
    参考：iframe 組み込みの YouTube Player API リファレンス
    https://developers.google.com/youtube/iframe_api_reference
*/
?>


    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <!---
        このセクションの <div> タグは、IFrame API が動画プレーヤーを配置する、
        ページ上の位置を識別します。
        プレーヤー オブジェクトのコンストラクタ（動画プレーヤーの読み込みのセクションで説明）は、
        id で <div> タグを識別することで、<iframe> を適切な位置に配置します。
        具体的には、IFrame API によって <div> タグが <iframe> タグに置換されます。
        または、<iframe> 要素をページに直接配置してもかまいません。
        配置方法は、動画プレーヤーの読み込みのセクションで説明しています。
     -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.

    // このセクションのコードにより IFrame Player API JavaScript コードが読み込まれます。
    // この例では DOM 変更を使って API コードをダウンロードすることで、コードが非同期で取得されるようにします。
    // <script> タグの async 属性（非同期のダウンロードを有効化）は最新のブラウザではまだサポートされていません。
    // これは Stack Overflow の回答で説明されているとおりです。

      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.

      // プレーヤー API コードがダウンロードされると、onYouTubeIframeAPIReady 関数が実行されます。
      // コードのこの部分では、組み込もうとしている動画プレーヤーを表すグローバル変数 player を定義します。
      // 続いて、関数によって動画プレーヤー オブジェクトが作成されます。
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '<?php echo $video_id ; ?>'  ,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      // onReady イベントが起動されると、onPlayerReady 関数が実行されます。
      // この例では、関数は動画プレーヤーの準備ができると再生を開始することを指示しています。
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.

      // プレーヤーの状態が変化すると、API によって onPlayerStateChange 関数が呼び出されます。
      // 状態は、プレーヤーの再生、一時停止、終了などを示します。
      // この関数により、プレーヤーの状態が 1（再生中）になると、動画を 6 秒間再生した後、stopVideo 関数を呼び出して動画を停止します。
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>
	/****************************************************************************
	指定したキーワードで、Youtube動画を検索して、もっとも近い動画を再生したい。
	動画の再生は、サイト内で行いたい。

	デモサイトはこちら
	http://ticklecode.com/present/150206_wp_moku_YouTube_API/

	******************************************************************************/


	<!DOCTYPE html>
	<html>
	<body>

	<?php
	/****************************************************
	全体の説明
	https://developers.google.com/youtube/v3/?hl=ja

	APIkeyの場所
	https://console.developers.google.com/project/861922253482/apiui/credential

	パラメタなど
	https://developers.google.com/youtube/v3/getting-started?hl=ja

	Searchパラメタ
	https://developers.google.com/youtube/v3/docs/search/list?hl=ja

	Data API (V2)プロトコル - API クエリパラメータ
	https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters?hl=ja

	******************************************************/

	$baseurl = "https://www.googleapis.com/youtube/v3/search?part=snippet";

	// 検索したいキーワード
	// リクエストにブール型演算子の NOT（-）と OR（\|）を使って、動画を除外したり、複数の検索キーワードのいずれかに関連する動画を検索したりすることもできる。
	// $en_name = "世界遺産+-BEST30";
	$en_name = "Mont Saint-Michel";

	// 検索クエリ　テキストをエンコードする
	$prm_q = urlencode($en_name);

	// API KEY
	$prm_key = "My API Key";

	$prm_max = 5; // 最大件数

	// order パラメータには、API レスポンス内のリソースの並べ替え方法を指定します。デフォルト値は SEARCH_SORT_RELEVANCE です。
	// $prm_order = "relevance ";

	// type パラメータは、検索クエリの対象を特定のタイプのリソースのみに制限します。
	$prm_type = "video";

	$url = "$baseurl&q=$prm_q&key=$prm_key&maxResults=$prm_max&type=$prm_type";

	// リクエストして、jsonを取得
	$json = file_get_contents($url);

	// JSONをPHPオブジェクトに格納
	$youtube = json_decode($json);

	// １件目のyoutubeのIDを取得
	$video_id = $youtube->items[0]->id->videoId;


	?>

	<h1>Youtube Data API Version 3 Sample</h1>
	<h2>世界遺産　Mont Saint-Mchel モン・サン＝ミシェル</h2>

	<p>キーワードを指定して、動画情報を取得。</p>
	<p>動画情報の取得には、Youtube Data APIを使う。</p>
	<p>取得した情報で、YouTube Player APIを使って動画を再生。</p>

	<?php
	/*
	参考：iframe 組み込みの YouTube Player API リファレンス
	https://developers.google.com/youtube/iframe_api_reference
	*/
	?>


	<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
	<!---
	このセクションの <div> タグは、IFrame API が動画プレーヤーを配置する、
	ページ上の位置を識別します。
	プレーヤーオブジェクトのコンストラクタ（動画プレーヤーの読み込みのセクションで説明）は、
	id で <div> タグを識別することで、<iframe> を適切な位置に配置します。
	具体的には、IFrame API によって <div> タグが <iframe> タグに置換されます。
	または、<iframe> 要素をページに直接配置してもかまいません。
	配置方法は、動画プレーヤーの読み込みのセクションで説明しています。
	-->
	<div id="player"></div>

	<script>
	// 2. This code loads the IFrame Player API code asynchronously.

	// このセクションのコードにより IFrame Player API JavaScript コードが読み込まれます。
	// この例では DOM 変更を使って API コードをダウンロードすることで、コードが非同期で取得されるようにします。
	// <script> タグの async 属性（非同期のダウンロードを有効化）は最新のブラウザではまだサポートされていません。
	// これは Stack Overflow の回答で説明されているとおりです。

	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.

	// プレーヤー API コードがダウンロードされると、onYouTubeIframeAPIReady 関数が実行されます。
	// コードのこの部分では、組み込もうとしている動画プレーヤーを表すグローバル変数 player を定義します。
	// 続いて、関数によって動画プレーヤーオブジェクトが作成されます。
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: '<?php echo $video_id ; ?>' ,
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

	// 4. The API will call this function when the video player is ready.
	// onReady イベントが起動されると、onPlayerReady 関数が実行されます。
	// この例では、関数は動画プレーヤーの準備ができると再生を開始することを指示しています。
	function onPlayerReady(event) {
	event.target.playVideo();
	}

	// 5. The API calls this function when the player's state changes.
	// The function indicates that when playing a video (state=1),
	// the player should play for six seconds and then stop.

	// プレーヤーの状態が変化すると、API によって onPlayerStateChange 関数が呼び出されます。
	// 状態は、プレーヤーの再生、一時停止、終了などを示します。
	// この関数により、プレーヤーの状態が 1（再生中）になると、動画を 6 秒間再生した後、stopVideo 関数を呼び出して動画を停止します。
	var done = false;
	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING && !done) {
	setTimeout(stopVideo, 6000);
	done = true;
	}
	}
	function stopVideo() {
	player.stopVideo();
	}
	</script>
	</body>
	</html>