Youtubeのムービープレイヤーを制御する

YoutubeのプレーヤーはJavaScriptで制御できると公式リファレンスで見つけたのでちょっと試してみました。

YouTube JavaScript Player API リファレンス - YouTube の API とツール - Google Code
http://code.google.com/intl/ja/apis/youtube/js_api_reference.html

公式サイトのプレイヤーを制御

リファレンスを参考に試行錯誤した結果、Youtubeの公式サイトでは(2009/03/03現在)以下のJavascriptで動作可能な様です。

公式サイトで動画を再生した後、以下のスクリプトをアドレスバーに入力してみて下さい。

一時停止

javascript:(function(){var player = _gel("movie_player");player.pauseVideo();})();

再生

javascript:(function(){var player = _gel("movie_player");player.playVideo();})();

停止(再開が出来ない様なので一時停止を使用した方が良いでしょう)

javascript:(function(){var player = _gel("movie_player");player.stopVideo();})();

公式サイト以外のサイトに埋め込まれたプレイヤーを制御

例として以前公開したこちらの動画を埋め込み、そのプレイヤーを制御するプログラムの作成方法を解説します。

1. 対象の動画をYoutubeで開く。
2. 画面右側にある「埋込み」から埋め込みコードをコピー。

3. コピーしたコードをエディタなどに張り付け、先頭の以下の部分にIDを追加。

<object width="

↓

<object id="ytplayer" width="

4. 続いて src= の部分を見つけ、URLの最後に enablejsapi=1 を追加(これにより、JavaScriptで制御可能になります)。

<embed src="http://www.youtube.com/v/Z7yh_mwAhYc&hl=ja&fs=1"

↓

<embed src="http://www.youtube.com/v/Z7yh_mwAhYc&hl=ja&fs=1&enablejsapi=1"

5. 制御関連のプログラムを追加。

    var obj = document.getElementById("ytplayer");
    var player = obj.getElementsByTagName("embed")[0];
    function play() {
      if (player) {
        player.playVideo();
      }
    }

【プログラムの解説】
3. で指定したIDを元に該当のobjectタグを取得、

    var obj = document.getElementById("ytplayer");

そのobjectタグの中の embed タグを取得します。

    var player = obj.getElementsByTagName("embed")[0];

これにより公式リファレンスと同様に player が取得が完了しました。後はリファレンスを参照しながら実行したい処理を記述します。

    function play() {
      if (player) {
        player.playVideo();
      }
    }

主なプログラム部分は以下の様になります。

<object id="ytplayer" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Z7yh_mwAhYc&hl=ja&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Z7yh_mwAhYc&hl=ja&fs=1&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

  <script type="text/javascript">
    var obj = document.getElementById("ytplayer");     // 自分で追加したIDで該当のobjectタグのオブジェクトを取得
    var player = obj.getElementsByTagName("embed")[0]; // objectタグ内のembedタグを取得
    function play() {
      if (player) {
        player.playVideo();
      }
    }

    function pause() {
      if (player) {
          player.pauseVideo();
      }
    }
  </script>
  <input type="button" value="Play" onclick="play();">
  <input type="button" value="Pause" onclick="pause();">

全プログラムの確認や動作確認はこちらで確認できます。

※公式リファレンスでは「JavaScript API でアクセスするプレーヤーの埋め込みには、SWFObject を使用することをお勧めします。」とありましたが SWFObject ではMac+Firefox3.0でうまく再生されなかったために今回のような方法で作成しました。