本文へジャンプ

YouTube iframe Player APIを使って、Webサイトに複数の動画プレーヤーを設置する

Posted by MD

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

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

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

  • JavaScript API

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

  • iframe API

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

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

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

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

HTML


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

HTML

以下の要領で空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モード」のオプション設定についても、現在調査中でございます。お楽しみに!

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+