JavaScriptで、HTMLに貼り付けた(埋め込み)YouTube動画をコントロールする方法
(YouTube JavaScript Player API/SWFObject使用)

YouTube動画のHTMLへの埋め込みは、SWFObjectを使用します。
埋め込まれた動画は、JavaScript API(YouTube JavaScript Player API )を使用すると、
YouTube の埋め込み動画プレーヤーを JavaScript でコントロールできます。
JavaScript APIの関数を呼び出すことでさまざまな操作を実行できます。
  • 再生
  • 一時停止
  • 指定した動画位置への移動
  • ボリューム調整、ミュート など
右の動画は、再生およびボリューム調整を行っています。(JavaScript例)
function onYouTubePlayerReady(playerId) {
      ytplayer1 = document.getElementById("myytplayer1"); }
function play() {
  if (ytplayer1) {
     ytplayer1.playVideo();     //再生開始(自動再生)
     ytplayer1.setVolume(20); } //音量を20に設定
}
    
You need Flash player 8+ and JavaScript enabled to view this video.

※音声はこの動画から出ています。画面は480x274(16:9)です。
YouTube JavaScript Player APIの動画コントロール例(サンプル動画 VIDEO_ID:ul7XSQPGGo4。画面は480x295(16:9)。)
You need Flash player 8+ and JavaScript enabled to view this video.
ステータス: 接続中

    
(再生中使用)

再生時間(S): --:-- ≫ タイマー(S):--:--
総容量(B): --
  開始バイト位置(B): -- ≫ ダウンロードバイト数(B): --

| 開始時間(S):

|音量: --

サンプルHTML~SWFObjectで動画埋め込み、簡単な動画コントロール


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>YouTube動画をHTMLに貼り付ける|動画コントロール サンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--▼A Use the Google AJAX Libraries API: http://code.google.com/apis/ajaxlibs/ 
  SWFObject:http://code.google.com/intl/ja/apis/ajaxlibs/documentation/index.html#swfobject -->
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("swfobject", "2.1");
    </script>

<!--▼B 動画コントロールJavascript-->
<script type="text/javascript">
//動画特定プレーヤーの準備が整うとこの関数が実行される▼B-1
function onYouTubePlayerReady(playerId) {
  //alert(playerId);
  if(playerId == "ytplayer1"){
         ytplayer1 = document.getElementById("myytplayer1");  //サンプル動画
     }
  if(playerId == "ytplayer2"){
         ytplayer2 = document.getElementById("myytplayer2"); //動画2
     }
}

//動画コントロール▼B-2
function play1() {
  if (ytplayer1) {
     ytplayer1.playVideo();
     ytplayer1.setVolume(20);
  }
}
</script>

</head>
<body onload="setTimeout('play1()',3000)"><!--▼E 動画の起動(コントロール)-->
<!--▼C 動画埋め込み場所-->
    <div id="ytapiplayer1">
       You need Flash player 8+ and JavaScript enabled to view this video.
    </div>
<!--▼D 動画埋め込み SWFObject-->
<script type="text/javascript">
 var params = { allowScriptAccess: "always" };
 var atts = { id: "myytplayer1" };
 swfobject.embedSWF("http://www.youtube.com/v/Fb4jRjSGvw0&enablejsapi=1&playerapiid=ytplayer1&rel=0
      &color2=0xcd311b", 
     "ytapiplayer1", "480", "295", "8", null, null, params, atts);
 </script>

</body>
</html>
    
(注)動画埋め込み場所ID:ytapiplayer1 埋め込みオブジェクトID:myytplayer1 プレーヤー特定ID:ytplayer1
 各IDの関係は、それぞれ青、赤、緑の色で示します。

1.ドキュメント

旧バージョンのためサイトはリンク切れです。
ここに、YouTube JavaScript Player API/SWFObjectのJavascriptコードサンプルがありますので使用できます。

2.SWFObject JSファイルの組み込み~▼A

SWFObject JSファイルの組み込みには、2つの方法があります。

  1. Google APIサイトから直接組み込む

        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("swfobject", "2.1");
        </script>

  2. Google APIサイトからGoogle AJAX Libraries APIのSWFObjectをダウンロードして組み込む
    (swfobject_2_2.zip 2009.12.23現在)

        <script type="text/javascript" src="swfobject.js"></script>
          

3.YouTubeプレーヤー(動画)の埋め込み

  1. 埋め込み動画のURL

    埋め込み動画のURLは、YouTube動画再生画面の「埋込み」タグを参照します(下)。
    <object>タグ内のパラメータ"movie"の値(value)がURL(赤字)です。
    <object width="480" height="295">
     <param name="movie" 
      value="http://www.youtube.com/v/Fb4jRjSGvw0&hl=ja_JP&fs=1&color1=0x5d1719&color2=0xcd311b"></param>
     <param name="allowFullScreen" value="true"></param>
     <param name="allowscriptaccess" value="always"></param>
     <embed src="http://www.youtube.com/v/Fb4jRjSGvw0&hl=ja_JP&fs=1&color1=0x5d1719&color2=0xcd311b" 
       type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" 
       width="480" height="295"></embed></object>
    
    (これは、YouTube動画再生画面の「埋込み」タグ。埋め込みオブジェクトという。)

    このURLに、つぎのように2つのパラメータをVIDEO_ID(Fb4jRjSGvw0)の後に、追加します。
    http://www.youtube.com/v/Fb4jRjSGvw0&enablejsapi=1&playerapiid=ytplayer1
    • enablejsapi:値: 0 または 1。デフォルトは 0 です。これを 1 に設定して、Javascript API が有効にします。
    • playerapiid:プレーヤー特定ID。任意の英数字。
      プレーヤーの準備が整うと、JavaScript関数onYouTubePlayerReadyが呼び出されます。
      必要に応じて、onYouTubePlayerReady コールバックが呼び出されたときにプレーヤーを特定するため
      playerapiid パラメータを渡します。
      ▼onYouTubePlayerReady関数例(プレーヤー特定IDは、JavaScript Player APIの関数で使用します)
      //動画特定プレーヤーの準備が整うとこの関数が実行される▼B-1(プレーヤー参照のため必須)
      function onYouTubePlayerReady(playerId) {
        if(playerId == "ytplayer1"){
               ytplayer1 = document.getElementById("myytplayer1"); //動画1
           }
        if(playerId == "ytplayer2"){
               ytplayer2 = document.getElementById("myytplayer2"); //動画2
           }
      }             
  2. SWFObjectへのYouTubeプレーヤー(動画)の埋め込み(▼D)
    SWFObjectのswfobject.embedSWF関数を使用して、YouTubeプレーヤー(動画)の埋め込みます。
    swfobject.embedSWF は、YouTube からプレーヤー(動画)を読み込み、これを指定されたページに埋め込みます。
    <!--▼D 動画埋め込み SWFObject-->
    <script type="text/javascript">
     var params = { allowScriptAccess: "always" };
     var atts = { id: "myytplayer1" };
     swfobject.embedSWF("http://www.youtube.com/v/Fb4jRjSGvw0&enablejsapi=1&playerapiid=ytplayer1&rel=0
          &color2=0xcd311b", 
         "ytapiplayer1", "480", "295", "8", null, null, params, atts);
     </script>
           
    【swfobject.embedSWFの記述形式】
     swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr,
                flashvarsObj, parObj, attObj)
    【説明】
    • swfUrlStr埋め込み動画(SWF) の URL です。なお、JavaScript API コールを有効にするため、
      通常の YouTube SWF URL には既に enablejsapi および playerapiid パラメータを追加してあります。
      YouTube動画再生画面の「埋込み」タグ内の埋め込み動画(SWF) の URLに、すでに存在するパラメータは、
      そのまま使用しても構いません。 YouTube 埋め込みプレーヤーのパラメータの詳細は、ここを参照。
    • replaceElemIdStr : 埋め込み動画が置き換えられる場所。HTMLのDIV ID です。上の例では ytapiplayer1 です。
    • widthStr : プレーヤーの幅です。
    • heightStr : プレーヤーの高さです。
    • swfVersionStr : ユーザーがコンテンツを表示するために必要な最低限のバージョンです。
      この例では、バージョン 8 以上が要求されています。
      ユーザー側にバージョン 8 以上がインストールされていない場合は、
      HTML DIV に指定されているデフォルトのテキスト行が表示されます。
    • xiSwfUrlStr : (オプション) SWF を高速インストールするための URL を指定します。この例では使用されていません。
    • flashVarsObj : (オプション) 使用している FlashVars を名前/値ペアで指定します。この例では使用されていません。
    • parObj : (オプション) 埋め込みタグオブジェクト(<object>タグ内)のパラメータです。
      この例では、allowScriptAccess を設定しています。 埋め込みタグは、YouTube動画再生画面の右にあります。
      【例】複数パラメータ例
      var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
    • AttObj : (オプション) 埋め込みタグオブジェクトのID属性です。この例では、ID が myytplayer1 に設定しています。


  3. YouTubeプレーヤーの埋め込み場所(▼C)
    swfobject.embedSWF関数のreplaceElemIdStrパラメータで指定したIDで、YouTubeプレーヤーの埋め込み場所
    を、DIVタグで定義します。
    <!--▼C 動画埋め込み場所-->
        <div id="ytapiplayer1">
           You need Flash player 8+ and JavaScript enabled to view this video.
        </div>

4.Javascriptで、YouTubeプレーヤー(動画)のコントロール(プレーヤー API メソッド)

プレーヤーAPIメソッドを呼び出すには、まずコントロールしたいプレーヤーへの参照を取得する必要があります。
そのためには、object (または、 SWFObject を使用してプレーヤー SWF を埋め込む場合は、
そのプレーヤー SWF を含む embed タグ) を getElementById() で呼び出します。

プレーヤー API メソッドの関数の詳細は、YouTube JavaScript Player API リファレンスにあります。
Javascriptで、YouTubeプレーヤー(動画)をコントロールする簡単な例を述べます。
例は、「ページが表示されたら、動画を再生して、音量を20に設定する」です。
<!--▼B 動画コントロールJavascript-->
<script type="text/javascript">
//動画特定プレーヤーの準備が整うとこの関数が実行される▼B-1
function onYouTubePlayerReady(playerId) {
  if(playerId == "ytplayer1"){
         ytplayer1 = document.getElementById("myytplayer1");  //サンプル動画
     }
  if(playerId == "ytplayer2"){
         ytplayer2 = document.getElementById("myytplayer2"); //動画2
     }
}

//動画コントロール▼B-2
function play1() {
  if (ytplayer1) {
     ytplayer1.playVideo();    //動画の再生を開始する
     ytplayer1.setVolume(20);  //音量を20に設定する
  }
}
</script>
・・・
<body onload="setTimeout('play1()',3000)"><!--▼E 動画の起動(コントロール)-->

      
  • onYouTubePlayerReady関数(▼B-1)
    SWFObjectで埋め込まれた動画がロードされると、Javascript関数 onYouTubePlayerReadyが自動的に起動されます。
    onYouTubePlayerReadyを呼び出すとき、SWFObject関数swfobject.embedSWFのURLパラメータのplayerapiidパラメータの
    値(プレーヤー特定ID:ytplayer1)を渡します。
    このコードで渡される唯一の属性は、埋め込みオブジェクトの id (ここでは myytplayer1) です。
    この ID は、getElementById() を使用してプレーヤーへの参照を取得するためのものです。
  • play1関数(▼B-2)
    プレーヤー特定ID:ytplayer1を用いて、プレーヤー API関数を発行します。
    ytplayer1.playVideo(); //動画の再生を開始する
    ytplayer1.setVolume(20); //音量を20に設定する

動画関連サイト内リンク


  最終更新日:2009.12.23(初版)