[JS] Youtubeをサイト内で再生させるYoutube APIの使い方。スマホにも対応させる。

こんにちは、@yoheiMuneです。
今日は、JavaScriptを用いて、サイト内でYoutubeの動画を再生する方法をブログに書きたいと思います。

Youtube APIを使う

Youtubeには、外部プログラムからデータを再生したり検索したりする為のAPIがいくつか用意されています。

Player API: AS3

Flash(ActionScript3)でYoutubeを再生する為のAPI

Player API: JavaScript

JavaScriptでYoutubeを再生する為のAPI。ブラウザはFlash環境が必須。

Player API: iframe

iframe + JavaScriptを用いたAPI。ブラウザはFlashかHTML5 Videoのどちらかが必要。

Data API

Youtube内の動画検索や関連動画取得などの情報取得用API

今回はiPhoneでの再生もサポートしたい為、Flash環境が必須でない「iframe」を用いた方法で実装します。

iframe APIを用いてサイト内でYoutubeを再生する

それでは実装方法です。動画の表示位置の指定にはHTMLを用いて、 動画の取得やプレーヤーの操作には、JavaScriptを利用します。
まずは、以下のように動画再生場所のHTMLを作成します。

<div id="player"></div>

ここで指定したdivがYoutubeのJSによって、再生用のiframeに置き換えられます。
続いてJavaScriptの実装です。

// YoutubeのJSファイルをロードします。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// YoutubeのJSファイルがロードされ実行されると、
// onYouTubeIframeAPIReadyメソッドが呼ばれるので、
// 再生準備を行います。
var player;
function onYouTubeIframeAPIReady() {
  // "player"という文字列は、divのID属性の値を指定します。
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 再生が可能になると呼び出されます。
function onPlayerReady(event) {
  // 再生を開始します。
  event.target.playVideo();
}

// 再生した、停止したなどのプレーヤーのステータスが変わった場合に
// 呼び出されます。
function onPlayerStateChange(event) {
  // 再生が終わったら、alertしてみます
  if (event.data == YT.PlayerState.ENDED) {
    alert('finish');
  }
}

とこんな感じです。より詳しい情報は、Youtube Player API Reference for iframe Embedsを参照ください。 上記で紹介した以外にも、色々と出来るようです。

iPhoneやAndroidでもYoutubeをサイト内で再生する

さてiPhoneやAndroidでは、上記の実装では再生できません（出来ない可能性が高いです）。
iPhoneなどの場合、OS側で自動再生が禁止されていて、 動画読み込み完了時に勝手に「event.target.playVideo()」を呼び出しても再生されない為です（自分の環境では勝手にevent.target.playVideo()を呼び出すと、その後どうやっても再生できなくなってしまいました）。

解決策としては、ユーザーが自分の行動で（タップして）、再生させることで解決します。
対策方法は簡単で、動画読み込み時の処理を、iPhoneやAndroidを考慮してには以下のように行います。

// 再生が可能になると呼び出されます。
function onPlayerReady(event) {

  // iPhoneでもAndroidでも無い場合のみ
  if (navigator.userAgent.toLowerCase().indexOf('iphone') !== -1
      && navigator.userAgent.toLowerCase().indexOf('iphone') !== -1) {
     // 再生を開始します。
     event.target.playVideo();
  } else {
    // iPhoneやAndroidの場合には、自動再生せず、
    // iframe上に(自動で出る）出る再生ボタンを押してもらって再生をします。
  }
}

とこんな感じです。スマホの場合には、ユーザーが自分でタップして再生を開始することで、スマホでもYoutubeの再生を行うことが出来ます。

最後に

以上、Youtubeをサイト内で再生する方法でした。
HTML5 Videoを使った再生が出来るため、Flashサポートされていないブラウザでも再生できるのがありがたいです。

最後迄ご覧頂きましてありがとうございました。