Youtube IFrame API を使って遊んでみよう

2015年07月27日 16:44 （2015年08月18日 17:17 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

Webページで動画を活用したコンテンツもかなり増えてきた昨今ですが、如何お過ごしでしょうか。今回はYoutubeの動画をJavaScriptで操作する Youtube IFrame API を使って色々遊んでみましょう。

Youtube IFrame API を使ってみよう

Youtube IFrame API とは
基本的な使い方
動的にスクリプトをロードする
見た目・挙動・イベントを設定する
動画再生のイベントトラッキング
動画の再生の任意のタイミングでアクションを起こす
埋め込みプレイヤーでAPIを利用可能にする
まとめ

Youtube IFrame API とは

iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame API | Google Developers

IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。

Youtube の埋め込み動画プレーヤーは iframe 要素でパブリッシュされますが、それを動的に生成したり、プレーヤーの再生等を操作したり、イベントを検知して何かアクションを起こしたりする事が出来ます。動画を軸にしたコンテンツ作りに大活躍しそうですね。

基本的な使い方

プレーヤーの生成は YT.Player というクラスを利用して行います。引数にはプレイヤーを表示する為のコンテナ要素と、オプションを渡します。

<div id="movie"></div>
<script>
var onYouTubeIframeAPIReady = function(){
    var player = new YT.Player("movie", {
        videoId: "c5kmKO_gGsc",
        width: 1600,
        height: 900
    });
};
</script>

onYouTubeIframeAPIReady という関数は、APIのJavaScriptの準備が完了した段階で自動でコールされます。そして、APIのJavaScript本体を読み込みましょう。

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

これで #movie 要素内にプレーヤーが生成されます。とても簡単ですね。

ここでは第一引数に要素のid名を渡していますが、HTMLElementその物でも構いません。なんでしたら、新たに生成した空要素でもよいでしょう。

new YT.Player(document.getElementById("movie"), {...});
new YT.Player(document.createElement("div"), {...});

動的にスクリプトをロードする

onYouTubeIframeAPIReady は、スクリプトのロードが完了された時に一度しか実行されません。つまり既にスクリプトが読み込まれて初期化された状態で onYouTubeIframeAPIReady を設定したとしても、その処理は行われずに何も起こらない事になります。

そこで、「既にロードされている場合は即時実行、まだの場合はスクリプトを読み込んでから実行」という処理を関数にまとめてみます。（jQuery使用）

$.youtubeReady = function(callback){
    var EVENT_READY = "youtubeready";

    if(window.YT && window.YT.Player){
        return callback();
    }
    $(window).on(EVENT_READY, callback);
    window.onYouTubeIframeAPIReady = function(){
        $(this).trigger(EVENT_READY);
        window.onYouTubeIframeAPIReady = void 0;
    };
    $("<script>", {src: "//www.youtube.com/iframe_api"}).appendTo("body");
};

$.youtubeReady には実行したいコールバック関数を渡します。

$.youtubeReady(function(){
    var player = new YT.Player(...});
});

見た目・挙動・イベントを設定する

オプションの playerVars プロパティでプレーヤーの見た目・挙動を、また同じく events プロパティでイベントハンドラの設定をする事が出来ます。

var player = new YT.Player("movie", {
    videoId: "c5kmKO_gGsc",
    width: 1600,
    height: 900,
    playerVars: {
        autoplay: 1, // 自動再生する・しない
        controls: 0, // コントロールを表示する・しない
        showinfo: 0, // 動画の情報テキストを表示する・しない
        theme: "light" // テーマの選択（dark|light）
    },
    events: {
        onReady: function(e){
            console.log("--APIの準備が整いました--");
        } 
        onStateChange: function(e){
            if(e.data === YT.PlayerState.PLAYING){
                console.log("--再生中--");
            }
        } 
    }
});

playerVars では非常に細かい設定が可能です。詳しくは公式のドキュメントでお探しください。

YT.Player で動画を操作する為には、APIの準備を待たなければなりません。初期化時に動画を操作するためのアクションは onReady 内に書くと良いでしょう。

動画再生のイベントトラッキング

このAPIを調べるきっかけになったテーマなのですが、例えばユーザーがプレイヤーをクリックしてビデオを再生した時に、Google Analyticsにイベントを一度だけ送信したい場合。

onStateChange イベントを利用する事で実現できますが、再生中何度もPLAYING（再生中）ステートに切り替わる可能性がありますので、一度イベントを送信したらその処理を無効化する必要があります。

var playerTrackEvent = function(){
    // 一度だけトラッキングイベントを送信
    if(ga){
        ga("send", "event", "video", "play", "My Video");
        playerTrackEvent = undefined;
    }
};

var player = new YT.Player("movie", {
    ...
    events: {
        onStateChange: function(e){
            if(e.data === YT.PlayerState.PLAYING && playerTrackEvent){
                playerTrackEvent();
            }
        }
    }
});

動画再生の任意のタイミングでアクションを起こす

例えば「再生時間1:00のタイミングで背景を暗転させたい」など、動画の再生の経過時間をトリガーにしてアクションを起こしたい場合は、イベントを活用したい所ではありますが、events には onProgress のような物は用意されていません。その為、監視する関数を自前で書く必要があります。

（もっともそのような物を常に発火させていたらコスト的にもよろしくないでしょう）

// 再生時間が1:00を超えたらページ背景を黒くする
var player, timer, playerProgress;

playerProgress = function(){
    clearTimeout(timer);
    if(
        player.getPlayerState() === YT.PlayerState.PLAYING
        && player.getCurrentTime() > 60
    ){
        $("body").css("background-color", "#000");
        return;
    }
    timer = setTimeout(playerProgress, 100);
};

player = new YT.Player("movie", {
    ...
    events: {
        onReady: function(e){
            playerProgress();
        }
    }
});

多用するのはあまり良くなさそうですが、動画の再生にあわせてページに演出効果を加えたりするなど、ちょっと面白そうですね。

埋め込みプレーヤーでAPIを利用可能にする

Youtube のビデオ再生画面で取得できる「埋め込みコード」による埋込プレーヤーでも、APIが利用可能です。つまりHTMLに埋め込みコードの iframe を直書きして、それを元にインスタンスを生成して操作する事が出来ます。

下の例では、準備が完了した時点でプレーヤーをフェードインさせてみます。

HTML/CSS

<style>
#movie {
    transition: opacity 1s ease 0s;
    opacity: 0;
}
#movie.show {
    opacity: 1;
}
</style>
<iframe
    width="320"
    height="180"
    id="movie"
    src="https://www.youtube.com/embed/c5kmKO_gGsc?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1"
    frameborder="0"
    allowfullscreen
></iframe>

JavaScript

var player = YT.Player("movie", {
    events: {
        onReady: function(e){
            $(e.target).addClass("show");
        }
    }
});

埋め込みプレーヤーのURLに enablejsapi=1 のパラメータを付加しなければならない点に注意しましょう。

まとめ

動画の活用は負荷もそれなりなので使い所は考えなければなりませんが、訴求力を高めるには中々良い手段なので、上手に活用していきたいですね。

コメントを書く