YouTube APIを使ってみた

最近知ったのだけど、YouTubeのためのAPIが提供されてます。YouTube — Google Developers



まずはYouTube Player APIがとっかかりやすそう。
これを使うと自分好みのYouTubeプレイヤーなんかを作れちゃうみたい。
YouTube Player API Reference for iframe Embeds - YouTube — Google Developers


YouTubeの動画はリピートでの再生ができなくて、できたらいいのにと思っていたので試しにやってみました。
YouTube Player APIサンプル - jsdo.it - Share JavaScript, HTML5 and CSS

  • html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>YouTube Player</title>
</head>
<body>
	<!-- YouTubeプレイヤーのプレースホルダ -->
	<div id="player"></div>

	<!-- APIを読み込む -->
	<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
var VIDEO_ID = 'VhnVQizc69c';    // 動画のID
var player = null;    // プレイヤー

// この関数はPlayer APIのロードが終わった後に呼ばれる
function onYouTubeIframeAPIReady() {
    // プレイヤーの作成
	// 第1引数は、プレイヤーとなる	iframe要素が置き換わるDOM要素のID
	// 第2引数は、プレイヤーのオプション
	player = new YT.Player('player', {
		height: '390px',
		width: '640px',
		videoId: VIDEO_ID,    
        events: {    // イベントのマッピング
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

// onReadyイベント
function onPlayerReady(event) {
    // 動画の再生
    player.playVideo();
}

// onStateChangeイベント
function onPlayerStateChange(event) {
    // イベント
	// YT.PlayerState.ENDED
	// YT.PlayerState.PLAYING
	// YT.PlayerState.PAUSED
	// YT.PlayerState.BUFFERING
	// YT.PlayerState.CUED	
	
    if(event.data == YT.PlayerState.ENDED) {
        // 動画の最初に戻る
        player.seekTo(0, false);
        player.playVideo();
    }
}

うん簡単。

YouTube Data APIを使うと動画の検索とか結構いろんなことができるみたい。