複数のYouTube動画をJavaScriptで切り替えて再生する方法

ある案件の制作作業で、お客さまがアップしている多数のYouTube動画を1つのエリアで切り替えて再生する方法がないか探ったところ、YouTube JavaScript Player APIを利用すると簡単に実現することが分かったので紹介します。

YouTube JavaScript Player APIを利用すると、Object要素の属性を操作したり（Firefoxでしか動作しませんでした）、動画毎にObject要素用意してを切り替えたりする（動画が多数になると重いです...。）必要がなく、非常にシンプルに実現できました。また、動画を切り替えた時もプレーヤーそのものは表示されたままで、動画の再生エリアがダイレクトに切り替わるので、見た目も美しいです。

サンプルコード

動画はHTML5DevelopersJPさまのチャンネルから拝借させていただきました。サイトの仕様でjQueryを導入していたので、このサンプルでも利用しています。Internet Explorer 6～9、Firefox4～、Safari5で動作確認しました。

※2015年1月27日に、iframe 埋め込み式のサンプルを掲載しました。スマートフォンサイトではiframe 埋め込み式で切り替え再生が可能になります。

表示サンプル

代替コンテンツ

HTML

HTMLで記述しているので、XHTMLで利用する場合は適宜変更してください（param要素を閉じるあたり）。

ポイントは、動画のURLを指定する際、URLパラメータ"enablejsapi=1"を渡すをことです。

「YouTube動画ID」は、YouTubeの動画再生画面で「共有」をクリックしたときに表示されるリンクの後ろについているものです。例えば、リンクが"http://youtu.be/-CmUdSwFMwM"の場合は、"-CmUdSwFMwM"です。

動画リストのa要素には、「共有」をクリックしたときに表示されるリンクをそのまま記述します。

<body>
<!-- プレーヤー -->
<object width="560" height="345" type="application/x-shockwave-flash" id="obj-ytplayer" data="http://www.youtube.com/v/[YouTube動画ID]?enablejsapi=1&amp;playerapiid=ytPlayer&amp;version=3">
<param name="movie" value="http://www.youtube.com/v/[YouTube動画ID]?enablejsapi=1&amp;playerapiid=ytPlayer&amp;version=3">
<param name="allowScriptAccess" value="always">
<param name="allowFullScreen" value="true">
<p>代替コンテンツを入れます</p>
</object>
<!-- 動画リスト -->
<ul class="list-movie-01">
<li><a href="http://youtu.be/-CmUdSwFMwM">動画1</a></li>
<li><a href="http://youtu.be/_GfEtpibO0k">動画2</a></li>
<li><a href="http://youtu.be/dXFRgQmuni0">動画3</a></li>
</ul>
</body>

JavaScript

プレーヤーのロードが完了するとonYouTubePlayerReady関数が呼び出されます。この関数内でプレーヤーへの参照を取得し、APIを操作して動画を切り替えます。

function onYouTubePlayerReady(playerId) {
 "jQuery" in window && (function($) {
 $(function() {
 // プレーヤーへの参照を取得
 var ytPlayer = $("#obj-ytplayer").get(0);
 $(".list-movie-01 a").bind("click", function(event) {
 // デフォルト動作（＝リンク遷移）のキャンセル
 event.preventDefault();
 // a要素のhref属性に指定されたURLからYouTube動画IDを取得
 var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, "");
 // 新しい動画をロードして再生開始
 ytPlayer.loadVideoById(videoId);
 });
 });
 }(jQuery));
}

備考

このコードを利用するには、Flashプレーヤーがバージョン8以上である必要があります。バージョン判定をする場合は、SWFObjectをロードし、下記の記述を追加します。

"swfobject" in window && (function() {
 swfobject.registerObject("obj-ytplayer", "8.0.0");
}());

iframe 埋め込み式でスマートフォンのブラウザにも対応

また、2011年1月にiframe埋め込み式YouTube Player向けJavaScript Player APIのベータ版が登場しています。こちらを利用すると本記事同様、iPhoneのようなスマートフォン・iPadのようなタブレット端末でもYouTube動画の再生、JavaScriptを用いたプレーヤーの操作が可能です（但しInternet Explorerは8以上でないと正しく動作しませんでした）。

サンプル（2015年1月27日掲載）

HTML

<div id="embed_movie"></div>

JavaScript

var ytPlayer2;

// Player APIの非同期ロード
(function (document) {
    var api = document.createElement("script"),
        script;
    
    api.src = "//www.youtube.com/player_api";
    script = document.getElementsByTagName("script")[0];
    script.parentNode.insertBefore(api, script);
}(document));

// Player APIスタンバイ完了時の処理
function onYouTubePlayerAPIReady() {
    ytPlayer2 = new YT.Player("embed_movie", {
        width: 460,
        height: 350,
        videoId: "QoXNNDKLvSY",
        playerVars: {
            "rel": 0,
            "autoplay": 0,
            "wmode": "opaque"
        }
    });
}

// 動画リストクリック時の処理
$(function () {
    $(".list-movie-02").on("click", "a", function (e) {
        e.preventDefault();
        var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, "");
        ytPlayer2.loadVideoById(videoId);
    });
});

ご質問への回答

フルスクリーン表示に関して

「フルスクリーン表示をクリックしてもフルスクリーンにならない」とのご質問を頂いたのですが、単にフルスクリーンを許可するパラメータを書き忘れておりました。コードを加筆させていただきました。（2012年3月14日）