YouTube Player APIを使って色々やってみる
ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、
YouTube Player API の使い方をまとめてみます。
今回使用するのは、以下のIFrame API になります。
iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers
■目次
基本的な埋め込み
まずはYouTubeプレーヤーをページに埋め込んでみます。
1.YouTubeを埋め込む場所を指定
■HTML
<div id="sample"></div>
※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sampleがiframeに置換されます。
2.jsファイルの読み込み
</body>の直前にjsファイルを読み込ませます。
■HTML
<script src="sample.js"></script>
HTML内に直接JavaScriptを記述しても問題ないですが、今回はこのsample.js内に必要な記述を追加します。
3.IFrame Player API の読み込み
sample.js内にIFrame Player APIを読み込む記述を追加します。
■JavaScript
// IFrame Player API の読み込み var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
4.YouTubeの埋め込み
sample.js内にYouTubeプレーヤーを埋め込む記述を追加します。
■JavaScript
// YouTubeの埋め込み function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'sample', // 埋め込む場所の指定 { width: 640, // プレーヤーの幅 height: 390, // プレーヤーの高さ videoId: 'bHQqvYy5KYo' // YouTubeのID } ); }
これでYouTubeの埋め込みが完了しました。
以下でも使用していきますが、onYouTubeIframeAPIReady関数内で指定している
「ytPlayer」に対して処理を記述することで、プレーヤーに対する処理を行えます。
ソースコードの一式はサンプルページをご確認ください。
JavaScriptでの操作
JavaScriptでYouTubeの再生や一時停止、シークバーの移動、音量調整などを操作してみます。
1.jQueryの読み込み
記述を簡易にするため、jQueryを読み込んで使用します。
■HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2.ボタンの設置
再生や一時停止など、イベント用のボタンを設置します。
■HTML
<button id="play">再生</button> <button id="pause">一時停止</button> <button id="prev">1分前へ</button> <button id="next">1分先へ</button> <button id="volup">音量アップ</button> <button id="voldown">音量ダウン</button> <button id="mute">ミュート</button>
3.各ボタンに処理を追加
各ボタンをクリックしたときの処理を追加します。
■JavaScript
$(function() { // 再生 $('#play').click(function() { ytPlayer.playVideo(); }); // 一時停止 $('#pause').click(function() { ytPlayer.pauseVideo(); }); // 1分前へ $('#prev').click(function() { // 現在の再生時間取得 var currentTime = ytPlayer.getCurrentTime(); // シークバーの移動 ytPlayer.seekTo(currentTime - 60); }); // 1分先へ $('#next').click(function() { // 現在の再生時間取得 var currentTime = ytPlayer.getCurrentTime(); // シークバーの移動 ytPlayer.seekTo(currentTime + 60); }); // 音量アップ(+10) $('#volup').click(function() { // 現在の音量取得 var currentVol = ytPlayer.getVolume(); ytPlayer.setVolume(currentVol + 10); }); // 音量ダウン(-10) $('#voldown').click(function() { // 現在の音量取得 var currentVol = ytPlayer.getVolume(); ytPlayer.setVolume(currentVol - 10); }); // ミュート $('#mute').click(function() { // ミュートされているかどうか if(ytPlayer.isMuted()) { // ミュートの解除 ytPlayer.unMute(); } else { // ミュート ytPlayer.mute(); } }); });
※プレーヤーの準備ができる前にボタンをクリックするとエラーが出るので、正しくはその対応が必要になります。 詳しくは、プレーヤーの準備ができてからJavaScriptでの操作を行うの項目で記載しています。
プレーヤーの状態に応じて処理をする
埋め込んでいるプレーヤーの状態に応じて処理を行ってみます。
今回はプレーヤーの準備ができたときに動画を自動再生、
プレーヤーの状態が変更されたときにconsole.logで通知、再生終了したときに最初から再生させてみます。
1.プレーヤーの準備ができたときの処理
プレーヤーの準備ができたときに実行する関数を準備します。
■JavaScript
// プレーヤーの準備ができたとき function onPlayerReady(event) { // 動画再生 event.target.playVideo(); }
2.プレーヤーの状態が変更されたときの処理
プレーヤーの状態が変更されたときに実行する関数を準備します。
■JavaScript
// プレーヤーの状態が変更されたとき function onPlayerStateChange(event) { // 現在のプレーヤーの状態を取得 var ytStatus = event.data; // 再生終了したとき if (ytStatus == YT.PlayerState.ENDED) { console.log('再生終了'); // 動画再生 event.target.playVideo(); } // 再生中のとき if (ytStatus == YT.PlayerState.PLAYING) { console.log('再生中'); } // 停止中のとき if (ytStatus == YT.PlayerState.PAUSED) { console.log('停止中'); } // バッファリング中のとき if (ytStatus == YT.PlayerState.BUFFERING) { console.log('バッファリング中'); } // 頭出し済みのとき if (ytStatus == YT.PlayerState.CUED) { console.log('頭出し済み'); } }
3.YouTubeを埋め込むときにイベントを追加
■JavaScript
// YouTubeの埋め込み function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'sample', // 埋め込む場所の指定 { width: 640, // プレーヤーの幅 height: 390, // プレーヤーの高さ videoId: 'bHQqvYy5KYo', // YouTubeのID // イベントの設定 events: { 'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 } } ); }
これで、プレーヤーの準備ができたときにonPlayerReady関数が、
プレーヤーの状態が変更されたときにonPlayerStateChange関数が実行されます。
サンプルページ3
プレーヤーの準備ができてからJavaScriptでの操作を行う
JavaScriptでの操作の項目でも記載しましたが、プレーヤーの準備ができる前に
プレーヤーの操作を行うとエラーが出てしまうので、場合によってはその対応が必要になります。
ここでは、先ほど作成したJavaScriptでの操作の項目のサンプルに対応を追加してみます。
1.プレーヤーの準備ができたときの処理
プレーヤーの準備ができたかどうか判別するために、playerReadyという変数を用意します。
■JavaScript
var playerReady = false; // プレーヤーの準備ができたとき function onPlayerReady(event) { playerReady = true; }
プレーヤーの準備ができていない場合はplayerReadyがfalseに、準備できている場合はtrueになります。
2.YouTubeを埋め込むときにイベントを追加
■JavaScript
// YouTubeの埋め込み function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'sample', // 埋め込む場所の指定 { width: 640, // プレーヤーの幅 height: 390, // プレーヤーの高さ videoId: 'bHQqvYy5KYo', // YouTubeのID // イベントの設定 events: { 'onReady': onPlayerReady // プレーヤーの準備ができたときに実行 } } ); }
3.各ボタンに処理を追加
各ボタンをクリックしたときに、playerReadyがtrueのときだけ処理を行うようにします。
■JavaScript
$(function() { // 再生 $('#play').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { ytPlayer.playVideo(); } }); // 一時停止 $('#pause').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { ytPlayer.pauseVideo(); } }); // 1分前へ $('#prev').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { // 現在の再生時間取得 var currentTime = ytPlayer.getCurrentTime(); // シークバーの移動 ytPlayer.seekTo(currentTime - 60); } }); // 1分先へ $('#next').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { // 現在の再生時間取得 var currentTime = ytPlayer.getCurrentTime(); // シークバーの移動 ytPlayer.seekTo(currentTime + 60); } }); // 音量アップ(+10) $('#volup').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { // 現在の音量取得 var currentVol = ytPlayer.getVolume(); // 音量の変更 ytPlayer.setVolume(currentVol + 10); } }); // 音量ダウン(-10) $('#voldown').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { // 現在の音量取得 var currentVol = ytPlayer.getVolume(); // 音量の変更 ytPlayer.setVolume(currentVol - 10); } }); // ミュート $('#mute').click(function() { // playerReadyがtrueのときだけ実行 if(playerReady) { // ミュートされているかどうか if(ytPlayer.isMuted()) { // ミュートの解除 ytPlayer.unMute(); } else { // ミュート ytPlayer.mute(); } } }); });
これで、プレーヤーの準備ができる前にプレーヤーの操作を行わないようになりました。
サンプルページ4
パラメータを設定する
パラメータとは、YouTubeの動画ページで埋め込みコードを取得する際に設定できる項目のことです。
パラメータを設定することで、プレーヤーの設定を色々とカスタマイズする事ができます。
動画ページの埋め込みコードでは4種類しかありませんが、これ以外にも種類が色々ありますので
設定方法と合わせて紹介します。
1.パラメータの設定
例として、関連動画の非表示、動画の自動再生のパラメータを設定してみます。
■JavaScript
// YouTubeの埋め込み function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'sample', // 埋め込む場所の指定 { width: 640, // プレーヤーの幅 height: 390, // プレーヤーの高さ videoId: 'bHQqvYy5KYo', // YouTubeのID // パラメータの設定 playerVars: { rel: 0, // 再生終了後に関連動画を表示するかどうか設定 autoplay: 1 // 自動再生するかどうか設定 } } ); }
サンプルページ5
YouTube読み込み後に自動再生され、再生完了後に関連動画が表示されなくなりました。
2.パラメータの種類
パラメータにどんな種類があるかを見てみます。
ここでは一部しか記載していませんので、詳しくは以下をご確認ください。
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ - YouTube — Google Developers
- ■autoplay
-
自動再生するかどうか設定。
- autoplay: 0 自動再生しない(デフォルト)
- autoplay: 1 自動再生する
- ■controls
-
コントロールバーを表示の設定。
- controls: 0 コントロールバー非表示
- controls: 1 コントロールバー表示(デフォルト)
- controls: 2 動画再生後にコントロールバー表示
- ■end
-
指定した秒数を経過したときに動画を停止。 値は正の整数。
- ■listType
-
プレーヤーに読み込むコンテンツを識別するときに、listパラメータと合わせて使用。
- listType: playlist 再生リストを表示
- listType: search list パラメータで指定した文字列で検索を行い、その動画を再生リストとして表示
- listType: user_uploads YouTubeチャンネルを表示
- ■list
-
プレーヤーに読み込むコンテンツを識別するときに、listTypeパラメータと合わせて使用。
- list: playlistのとき、listには再生リストIDを指定
- list: search listのとき、listには検索する文字列を指定
- list: user_uploadsのとき、listにはYouTubeチャンネルを指定
- ■loop
-
動画を繰り返し再生するかどうか設定。
- loop: 0 繰り返し再生されない(デフォルト)
- loop: 1 繰り返し再生される
単一の動画の場合、同じ動画IDをplaylistパラメータの値に設定する必要があります。
- ■playlist
-
最初の動画再生後、指定した動画を順番に再生。 値は再生する動画IDをカンマで区切ったリスト。
- ■rel
-
再生終了後に関連動画を表示するかどうか設定。
- rel: 0 表示しない
- rel: 1 表示する(デフォルト)
- ■showinfo
-
動画再生前にタイトルなどを表示するかどうか設定。
- showinfo: 0 表示しない
- showinfo: 1 表示する(デフォルト)
- ■start
-
指定した秒数から動画を再生。 値は正の整数。
- ■wmode
-
プレーヤー(Flash)の重なり具合を変更。 IEでプレーヤーの上に要素を重ねるときに指定することが多いです。
- wmode: transparent プレーヤーを背面に表示する
※iFrameでYouTubeを埋め込む場合はHTML5プレーヤーかAS3プレーヤーを読み込みますが、 プレーヤーによってサポートしていないパラメータもあるようです。
追記:
実際に使用するときに便利そうなtipsをまとめた記事を公開しました。
YouTube Player APIを使う時のtips集
【参考サイト】