KEINOS/Youtube IFrame API sample

## Youtube IFrame API sample
<!DOCTYPE html>
<html>
<body>
    <!-- 1. 下記<div>タグが<iframe> (とビデオ・プレーヤー)に置き換わります。 -->
    <h3>YouTube Play List</h3>
    <div id="player"></div>

    <!-- 動画が次へ移るとonPlayerStateChange関数により<div>タグ内の情報も更新されます -->
    <h3>Current URL of Video</h3>
    <div id="video_url"></div>
    <h3>Current ID of Video</h3>
    <div id="video_id"></div>

    <!-- 2. IFrame Player APIの読み込み。
        最初に読み込む必要があるため、一般的には非同期（最初のscriptタグ出現の前に
        scriptエレメントを動的に挿入し、そのsrc属性）でAPI読み込みを最初に読み込ま
        せます。
    -->
    <script src="https://www.youtube.com/iframe_api"></script>

    <!-- jQueryの読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script>
        // 3. この関数はAPI読み込み後、<iframe>（とYouTubeプレーヤー）
        //    を生成します。
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player( 'player', {
                height    : '390',
                width     : '640',
                playerVars: {
                    listType   : 'playlist',
                    list       : '<YOUT YOUTUBE PLAYLIST ID>',
                    'autoplay' : 1,
                    'controls' : 1
                },
                events: {
                    'onReady'       : onPlayerReady,
                    'onStateChange' : onPlayerStateChange
                }
            });
        }

        // 4. 動画の準備ができると、APIはこの関数を呼び出します。
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // 5. 動画のステータス（状態）に変更があると、APIは下記関数を呼び出します。
        //    ここでは、動画のURLをチェックし、動画が変更された場合、上記<div>の内容
        //    をURLに書き換えます。
        var latestVideoId;
        function onPlayerStateChange(event) {
            var currentVideoId;
            if ( event.data == YT.PlayerState.PLAYING ) {
                currentVideoId = getVideoIdFromUrl( player.getVideoUrl() );
                if( latestVideoId != currentVideoId ){
                    latestVideoId = getVideoIdFromUrl( player.getVideoUrl() );
                    $('#video_url').html( player.getVideoUrl() );
                    $('#video_id').html( latestVideoId );
                }
            }


        }

        function stopVideo() {
            player.stopVideo();
        }

        // urlから動画のIDを取得する
        function getVideoIdFromUrl( url ){
            var vars   = [], hash;
            var hashes = url.slice( url.indexOf('?') + 1　).split('&');

            for( var i = 0; i < hashes.length; i++ ) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }

            return vars["v"]; // URL内のクエリが"v"の内容を返す
        }

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<!-- 1. 下記<div>タグが<iframe> (とビデオ・プレーヤー)に置き換わります。 -->
	<h3>YouTube Play List</h3>
	<div id="player"></div>

	<!-- 動画が次へ移るとonPlayerStateChange関数により<div>タグ内の情報も更新されます -->
	<h3>Current URL of Video</h3>
	<div id="video_url"></div>
	<h3>Current ID of Video</h3>
	<div id="video_id"></div>

	<!-- 2. IFrame Player APIの読み込み。
	最初に読み込む必要があるため、一般的には非同期（最初のscriptタグ出現の前に
	scriptエレメントを動的に挿入し、そのsrc属性）でAPI読み込みを最初に読み込ま
	せます。
	-->
	<script src="https://www.youtube.com/iframe_api"></script>

	<!-- jQueryの読み込み -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<script>
	// 3. この関数はAPI読み込み後、<iframe>（とYouTubeプレーヤー）
	// を生成します。
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player( 'player', {
	height : '390',
	width : '640',
	playerVars: {
	listType : 'playlist',
	list : '<YOUT YOUTUBE PLAYLIST ID>',
	'autoplay' : 1,
	'controls' : 1
	},
	events: {
	'onReady' : onPlayerReady,
	'onStateChange' : onPlayerStateChange
	}
	});
	}

	// 4. 動画の準備ができると、APIはこの関数を呼び出します。
	function onPlayerReady(event) {
	event.target.playVideo();
	}

	// 5. 動画のステータス（状態）に変更があると、APIは下記関数を呼び出します。
	// ここでは、動画のURLをチェックし、動画が変更された場合、上記<div>の内容
	// をURLに書き換えます。
	var latestVideoId;
	function onPlayerStateChange(event) {
	var currentVideoId;
	if ( event.data == YT.PlayerState.PLAYING ) {
	currentVideoId = getVideoIdFromUrl( player.getVideoUrl() );
	if( latestVideoId != currentVideoId ){
	latestVideoId = getVideoIdFromUrl( player.getVideoUrl() );
	$('#video_url').html( player.getVideoUrl() );
	$('#video_id').html( latestVideoId );
	}
	}


	}

	function stopVideo() {
	player.stopVideo();
	}

	// urlから動画のIDを取得する
	function getVideoIdFromUrl( url ){
	var vars = [], hash;
	var hashes = url.slice( url.indexOf('?') + 1　).split('&');

	for( var i = 0; i < hashes.length; i++ ) {
	hash = hashes[i].split('=');
	vars.push(hash[0]);
	vars[hash[0]] = hash[1];
	}

	return vars["v"]; // URL内のクエリが"v"の内容を返す
	}

	</script>
	</body>
	</html>