YouTubeAPI を使ってYouTubeの埋め込みプレーヤーをカスタマイズする

YouTubeAPI を使ってみよう!

YouTube は動画のページから埋め込み用のタグをコピーしてきて、 コンテンツに貼り付けることでサイト内にプレーヤーを表示させることができます。

しかし、コンテンツによっては再生ボタンをオリジナルのものに変えたかったり、再生終了後にアクションを起したいという場合もあると思います。

YouTubeAPI を利用することで YouTube のプレーヤーをカスタマイズすることができます。

https://developers.google.com/youtube/

『YouTube API』などで検索すると日本語のドキュメントが出てきますが、こちらは v2 までしか掲載されていません。 現在の最新版の API は v3 なので、英語のドキュメントを直接見に行ったほうがよいと思います。

YouTubeのAPIはプレーヤーのカスタマイズ以外にもDataAPIなど、現在は5種類が用意されているようです。

• YouTube Data API … Youtube にデータを送ったりチャンネルの情報を受け取ったり出来る
• YouTube Analytics API … 動画の統計情報を取得できる
• YouTube Live Streaming API … ライブストリーミングを行うためのブロードキャストを作成できる
• YouTube Player Tools … YouTubeのプレーヤーをカスタマイズしたりできる
• YouTube Upload Widget … ユーザにサイト上で録画して投稿してもらうコンテンツを作成できるウィジェットを扱える API

YouTube Player Tools

今回は YouTube のプレーヤーをカスタマイズするのでPlayer Toolsを利用します。

APIするには登録は必要ありません。

動画の埋め込み方法は3種類用意されています。

• <Iframe>タグを利用して埋め込む方法
• IFrame Player API からIFrameを動的に生成して埋め込む方法
• <object>タグでFrashプレーヤーを埋め込む方法

3番めの object タグで埋め込む方法だとスマートフォン用にプレーヤーが切り替わらず見ることが出来なかったので気をつけてください。

Iframe Player APIを使ってプレーヤーをカスタマイズ

今回は IFrame Player API を使って、 『動画プレーヤーのカスタマイズ、再生状態が変更された時にイベントを起こす』 という所までをやってみたいと思います。

Iframe API のドキュメントはこちら YouTube Player API Reference for iframe Embeds

Simple Demo

まずはプレーヤーを表示させてみます。 HTMLにプレーヤーを表示させるための場所を DIV 要素などで用意しておきます。

<div id="player"></div>

次にプレーヤーを呼ぶための JavaScript を SCRIPT タグを作って読み込みます。

var scriptTag = document.createElement('script');
scriptTag.src = "https://www.youtube.com/player_api";
var fsTag = document.getElementsByTagName('script')[0];
fsTag.parentNode.insertBefore(tag, firstScriptTag);

上のスクリプトが読み込まれて利用できる状態になると自動的に onYouTubePlayerAPIReady メソッドが呼ばれるので、
このメソッドを用意して中で YT.Player のインスタンスを作成します。

第一パラメータには最初に HTML に配置した動画を置くための場所の ID属性を渡します。 第二パラメータにはプレーヤーの大きさや再生する動画の ID などをオブジェクトで渡します。

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'XeWxFDlufNo'
    });
}

では実際に動かしてみましょう。

普通のプレーヤーが出ました。
ここから少しずついじっていきます。

YT.Playerのインスタンス生成時に渡せるパラメータ一覧

YT.Playerのインスタンス生成時に渡せる第二引数のパラメータには以下のものがあります。

• width(number) … プレーヤーの幅 デフォルトは640
• height(number) … プレーヤーの高さ デフォルトは390
• videoId(string) … 再生するYouTubeのVideo ID(YouTubeのURLの?v=abcdeみたいなパラメータ)
• playerVars(object) … Player Parameters より値をオブジェクトで渡して見た目などを変更できる
• events(object) … onPlayerStageChange や onReady イベントが発火した時に実行するメソッドを指定する

先ほどのデモには無かったパラメータが記載されています。 playerVars にはこちらに掲載されているパラメータを指定できます。

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'XeWxFDlufNo'
    });
}

Flash 版と HTML5 版で対応しているパラメータに違いがあるので注意が必要です。 tags:

playerVarsに指定できるパラメータ一覧

指定できるパラメータは以下のとおりです。

• autohide
• autoplay
• cc_load_policy
• color
• controls
• disablekb
• enablejsapi
• end
• fs
• iv_load_policy
• list
• listType
• loop
• modestbranding
• origin
• playerapiid
• playlist
• rel
• showinfo
• start
• theme

このパラメータを先ほどのプレーヤーの playerVars に渡してみます。

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '240',
        width: '320',
        videoId: 'XeWxFDlufNo',
        playerVars: {
            autohide: 1, //コントローラーを自動的に隠すかどうか 0:デフォルト 1:マウスアウトしている時は消す 2:常に表示
            controls: 1, //コントローラーを表示するかどうか 0:非表示 1:表示(デフォルト)
            modestbranding: 1, //Youtubeのロゴをコントローラーに追加するかどうか 0:表示 1:非表示
            rel: 0, //再生終了後に関連動画を表示するかどうか 0:非表示 1:表示(デフォルト)
            start: 51, //再生開始時の秒数を指定
            theme:'light' //テーマカラーの変更 lightとdark
        }
    });
}

再生位置やコントローラーの色が変わりました!

イベントを利用して動画の状態に合わせてアクションを起こすプレーヤーの作成

最後にイベントを利用したデモを作ってみます。

一つ一つ解説していきます。 ますプレーヤーの上に自作のボタンをオーバーレイさせてあります。

これをクリックして playVideo() を呼び出すことでプレーヤーの動画が再生されるようにしています。

playBtn.click(function(){
    player.playVideo();
});

Playerのインスタンス作成時に events プロパティを設定しています。 ここでは onStateChange 発火時にonPlayerStateChangeメソッドが動作するようにしています。

player = new YT.Player('player', {
    height: '240',
    width: '320',
    videoId: 'XeWxFDlufNo',
    playerVars: {
        autohide: 1, //コントローラーを自動的に隠すかどうか 0:デフォルト 1:マウスアウトしている時は消す 2:常に表示
        controls: 1, //コントローラーを表示するかどうか 0:非表示 1:表示(デフォルト)
        modestbranding: 1, //Youtubeのロゴをコントローラーに追加するかどうか 0:表示 1:非表示
        rel: 0, //再生終了後に関連動画を表示するかどうか 0:非表示 1:表示(デフォルト)
        start: 51, //再生開始時の秒数を指定
        theme:'light' //テーマカラーの変更 lightとdark
    },
    events: {
        'onStateChange': onPlayerStateChange
    }
});

onStateChange はプレーヤーの状態が変化した時(停止から再生、再生から停止など)にイベントが起こります。

引数のオブジェクトにある dataプロパティにはそれぞれの状態と対応した数字が入れられており、 これを見て現在のプレーヤーの状態を知ることが出来るようになっています。

• -1 (再生前)
• 0 (再生終了)
• 1 (再生中)
• 2 (一時停止)
• 3 (バッファ中)
• 5 (ビデオがキューに入った)

これを利用して、動画が再生され始めたら上のオーバーレイを消す、 再生終了したら次の動画を再生する、 それも再生終了したらプレーヤーを消すという処理を行います。

var secondVideoFlg = false; //予めフラグを作って設定しておく

function playEnd(){
    if( secondVideoFlg === true ){ //2つ目の動画も再生終了していたら実行する
        var player_tag = document.getElementById('player');
        player_tag.style.webkitTransform = "scale(0)";
        player_tag.style.mozTransform = "scale(0)";
        player_tag.style.Transform = "scale(0)";
    }else if( secondVideoFlg === false ){ //1つ目の動画が再生完了していたら実行する
        player.clearVideo();
        player.loadVideoById("H4znsXCH_2Y", 170, "large"); //H4znsXCH_2Yというidの動画を170秒後からスタートするようにプレーヤーにセットする
        player.playVideo(); //動画を再生する
        secondVideoFlg = true; //二回目を再生したのでsecondFlgをtrueに
    }
}

function onPlayerStateChange(e){
    if (e.data == YT.PlayerState.ENDED) { //再生が終了したら
        playEnd(); //playEndメソッドを呼ぶ
    }
    if (e.data == YT.PlayerState.PLAYING) { //再生中になったら
        playBtn.hide(); //再生ボタンを消す
    }
}

iPhoneやiPadなどは、YouTube のプレーヤーに直接タップしないと再生されませんでしたので、再生ボタンを非表示にしています。

iPhoneでは再生時に QuickTime が起動し、全画面になってしまいますが、 きちんと指定した時間から再生が開始され、再生終了後には次の動画が再生されました。

こうやって簡単に再生に合わせてアクションを起こすのにも使えますし、
モバイル端末で動画のサビ部分だけを連続再生するプレーヤーの作成にも使えそうですね!!