様々な機能を持たせた動画プレイヤーを開発するにあたってフルスクラッチで開発することもあれば、オープンソースの動画プレイヤーライブラリーを使用することも多いと思います。今回はVideo.jsベースで動画広告を実装するにあたり「IMA SDK Plugin for Video.js」という便利なものがあるので試してみることにしました。これはもともとHTML5への動画広告実装するライブラリー「IMA SDK for HTML5」をVideo.js用にプラグイン化したもので、かなり使いやすくなっています。

実装方法はリンクページが英語ですが難しくはありません。IMA SDK Plugin以外に必要なものはvideo.jsvideojs-contrib-adsです。

下記CSSとJSを任意の場所に配置します。

CSS

  • video-js.css
  • videojs-contrib-ads.css
  • videojs.ima.css

JS

  • video.js
  • videojs-contrib-ads.js
  • videojs.ima.js

これらをHTMLファイルで読み込みます。また忘れずに、本家IMA SDK for HTML5のima3.jsも読み込みましょう。

//imasdk.googleapis.com/js/sdkloader/ima3.js

Video.jsはvideoタグのclassにvideo-jsを指定してあげることでVideo.jsプレイヤーが展開されます。サンプルではvideoタグにIDとしてplayerを指定していますので、広告を制御するためにそのIDを使用してplayerオブジェクトを生成してあげます。

var player = videojs('player');

この生成したplayerオブジェクトにはIMAプラグインが追加されています。一番シンプルなのはIMAプラグインにプレイヤーのIDと広告リクエストURLを渡してあげるだけで広告実装は完了します。

var options = {
 id: 'player',
 adTagUrl: '広告リクエストURL'
};
player.ima(options);

【DEMO】プリロール
※サンプルはPCで動作確認しています。

サンプルではVASTフォーマットの広告をリクエストしてます。動画本編再生前に広告が再生され、これでプリロールは無事に完成しました。
※VASTについてはこちらの記事を。

さて、ここまで作ったところで、IMA SDK Plugin for Video.jsのページにはミッドロール、ポストロールのことは書いていません。ん??どうやって実装するんでしょう。昔からこういったことに絡んでいる古臭い私としては動画の再生位置を管理したり再生完了を検知したりして、50%や10分などの任意の地点で広告リクエストを発動しプレイヤーにそのレスポンスを渡してあげる。またはIMAプラグインに何かしらのメソッドが用意されていて、任意のタイミングで広告リクエストをそのメソッドに渡してあげたらよしなに処理をしてくれると思っていました。でも調べてみるとVMAPを使用すると良いよということが書かれていました。VMAPとは任意のタイミング(AdBreak)を指定することで広告サーバーにリクエストを投げることを記述したXMLです。サンプルで使用しているものはプリロール、ポストロール、ミッドロールとして15秒の地点でVASTフォーマットの広告をリクエストするように記述してあります。

【DEMO】プリロール、ミッドロール、ポストロール

何ら難しいことはせずVMAPを読ませるだけで無事に実装完了しました。

調子に乗ってYouTubeなどでみかける5秒見たらスキップできるスキッパブル広告も試してみました。VASTがバージョン3.0からスキッパブル広告に対応したのでそれを返してくれる広告をリクエストしています。

【DEMO】スキッパブル広告

さてさて、プレイヤーで展開される動画広告ですがもちろんイベントも拾えます。広告リクエストが発生したり動画広告が再生されたりすると発生するイベントをプレイヤー下部に発生したタイミングで書き出しています。イベントが拾えるということは動画広告の再生タイミングなどで自前のログを仕込んだり、別の挙動に結びつけることも可能となってきます。

また後日プレイヤー外部に表示させるコンパニオン広告なども試しておきたいところです。

Jin