ページに埋め込んだ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集
【参考サイト】