MD-Blog_Web Creative

最近、『TBSラジオ ジェーン・スー 相談は踊る』をYouTubeで再生させながら眠ると、熟睡できることが判明した僕がお届けします。

今回のテーマは、YouTube Player APIです。
YouTube APIの公式ドキュメントには、一度にひとつの動画プレーヤーを埋め込む方法しか記載されていないため、今回は複数の動画プレーヤーを設置する方法をご紹介したいと思います。

YouTube APIは、大きく分けて2つあります。

• JavaScript API

SWFを埋め込み、ユーザーが使用しているFlashプレーヤーで動画を再生します。

• iframe API

ユーザーの環境を判別し、Flashをサポートしていないモバイルデバイスの際は、FlashプレーヤーではなくHTML5プレーヤーで動画を再生します。

今回は、ナウいiframe APIを使って動画を設置してみよう！

1. はじめに、APIを読み込む

以下のscriptタグを配置します。
これを忘れると"YTがないよ！"とエラーで叱られますのでご注意を。

HTML

<script src="https://www.youtube.com/iframe_api"></script>

2. 動画プレーヤーを設置する場所を用意する

HTML

以下の要領で空divを配置していきます。

<div id="player_aaaaaa" ></div>
<div id="player_bbbbbb" ></div>
<div id="player_cccccc" ></div>

3. 埋め込みたい動画のIDを入れた配列を準備する

動画のIDは、YouTubeのURLの末尾にありますね。
youtube.com/watch?v=abcdefghijk
という、「v=」の後に入っている文字列です。

JavaScript

var videoIdArray = ['aaaaaa', 'bbbbbb', 'cccccc'];

こんな感じで配列に納めます。

4. 生成するプレーヤーを保持するオブジェクトを準備する

後に生成したプレーヤーの再生を制御するために、YT.Playerオブジェクトを格納するオブジェクトを用意します。

JavaScript

var ytplayers = {};

5. プレーヤー生成関数の引数に配列を渡す

配列をfor in文で回して、その要素分の動画プレーヤーを設置します。
生成したプレーヤーオブジェクトは、先ほど準備したytplayersオブジェクトに納めます。こうすることで、ytplayers内の各プレーヤーにアクセスでき、再生の制御が可能になります。

JavaScript

// プレーヤーのロードを実行
loadPlayer(videoIdArray);

// YT.Playerを生成する関数
function loadPlayer(ids) {

    // 引数で受け取った配列をfor in文でまわす
    for (var i in ids) {
        var videoId = ids[i],
            playerId = "player_" + videoId;

        playerId = new YT.Player(
            playerId, { // 最初の引数に挿入したいHTML要素のidを指定する
                width: "880",
                height: "495",
                videoId: videoId
            }
        );

        // YT.Playerオブジェクトを格納する
        ytplayers[videoId] = playerId;
    }
}

まとめ

以下がコードの全体像です。

JavaScript

// 埋め込みたい動画のIDを入れた配列を準備する
var videoIdArray = ['aaaaaa', 'bbbbbb', 'cccccc'];

// YT.Playerオブジェクトを格納するオブジェクト作る
var ytplayers = {};

// プレーヤーのロードを実行
loadPlayer(videoIdArray);
// YT.Playerを生成する関数
function loadPlayer(ids) {

    // 引数で受け取った配列をfor in文でまわす
    for (var i in ids) {
        var videoId = ids[i],
            playerId = "player_" + videoId;

        playerId = new YT.Player(
            playerId, { // 最初の引数に挿入したいHTML要素のidを指定する
                width: "880",
                height: "495",
                videoId: videoId
            }
        );

        // YT.Playerオブジェクトを格納する
        ytplayers[videoId] = playerId;
    }
}

今回は導入方法の応用をご紹介しましたが、次回は「再生オプション」や、プレーヤーのステータス変更時に呼ばれる関数などを解説してみたいと考えています。
数年前に一時期だけ存在したYouTubeプレーヤーの画質劣化機能、「VHSモード」のオプション設定についても、現在調査中でございます。お楽しみに！