THEOplayer を使って静的なプリロール広告動画を挿入してみた
こんにちは、大前です。
今日は THEOPlayer を使って動画広告の挿入をやっていきたいと思います。
Youtube とかでよく流れるアレです（雑）
本格的な動画広告の挿入をしようとすると AD サーバーの用意などが必要になり、なかなかハードルが高くなりますが、静的な動画（事前に広告として流すことが決まっている CM など）を挿入するのであればお手軽に実現できたりします。
また、THEOplayer は動画広告を挿入するための機能もサポートしています。こちらも活用しつつ、静的な動画広告の挿入をやってみたいと思います。
THEOplayer で動画広告を挿入するには
THEOplayer を使った動画広告は以下のスクリプトをプレイヤーに埋め込む事で実現できます。
// Advertisement configuration
ads: [{
"sources": "//cdn.theoplayer.com/demos/preroll.xml",
"timeOffset": "start",
"skipOffset": 2
}]
How to set up VAST and VMAP ads?
各パラメータのざっくりとした説明は以下です。
- sources ... VAST 等で定義された、広告の挿入に関する情報が記載された XML ファイル
- timeOffset ... 広告の開始位置
- skipOffset ... 広告をスキップ可能になる時間（秒）
THEOportal から広告挿入の設定を行ってみる
上記ソースを直接プレイヤーに埋め込んでも良いですが、THEOplayer には THEOportal という便利な GUI 設定画面があるのでこちらを使って広告挿入の設定を行っていきます。
SDK の設定画面を開き、「CUSTOMIZE」→「ADVERTISEMENT」を開くと、下図の画面が表示されます。
表示された設定項目にて Advertisement のチェックを有効にし、他はとりあえずデフォルト値で SDK の設定変更を行います。
SDK のビルドが実行されたのち、サンプルコードを開いてみると先ほど記載したスクリプトが埋め込まれたいることが確認できます。
VAST で定義された XML をみてみる
動画広告を行うための技術要素として、よく VAST や VMAP といった単語が出てきます。
細かい説明は割愛しますが、どんな動画を挿入するかなど、広告挿入に関する情報をやりとりするための仕様と思ってもらえればとりあえず大丈夫です。
ですので、挿入したい動画の情報などはこの XML ファイルを修正することで指定する形となります。
せっかくなので、THEOplayer のデフォルトとして指定されている XML ファイルの中身を見てみましょう。
cdn.theoplayer.com/demos/preroll.xml を取得すると、以下の XML が確認できます。
<VAST version="2.0">
<Ad id="229">
<InLine>
<AdSystem version="4.11.0-10">LiveRail</AdSystem>
<AdTitle>
<![CDATA[ THEOplayer ]]>
</AdTitle>
<Creatives>
<Creative sequence="1" id="331">
<Linear>
<Duration>00:00:10</Duration>
<VideoClicks>
<ClickThrough>
<![CDATA[ http://www.theoplayer.com/ ]]>
</ClickThrough>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive" bitrate="400" width="320" height="180" type="video/mp4">
<![CDATA[ https://cdn.theoplayer.com/demos/lo.mp4 ]]>
</MediaFile>
<MediaFile delivery="progressive" bitrate="600" width="640" height="480" type="video/mp4">
<![CDATA[ https://cdn.theoplayer.com/demos/me.mp4 ]]>
</MediaFile>
<MediaFile delivery="progressive" bitrate="1024" width="480" height="352" type="video/mp4">
<![CDATA[ https://cdn.theoplayer.com/demos/hi.mp4 ]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
各パラメータの概要をそれぞれ見ていきます。
詳細な仕様については以下公式ドキュメントを参照ください。
Video Ad Serving Template(VAST)
AdTitle
挿入する広告のタイトルを指定します。
<AdTitle>
<![CDATA[ THEOplayer ]]>
</AdTitle>
Duration
広告動画の長さを指定します。
<Duration>00:00:10</Duration>
ClickThrough
広告がクリックされた時に開かれる URI を指定します。
<VideoClicks>
<ClickThrough>
<![CDATA[ http://www.theoplayer.com/ ]]>
</ClickThrough>
</VideoClicks>
MediaFiles
広告として挿入する動画を指定します。
複数の動画ファイルを bitrate パラメータと組み合わせて指定することにより、ユーザーの帯域幅に応じて適切なサイズの動画を挿入することができます。
公式ドキュメントにも、品質別（高/中/低）の 3つの動画ファイルを指定することを推奨する文言がありました。
<MediaFiles>
<MediaFile delivery="progressive" bitrate="400" width="320" height="180" type="video/mp4">
<![CDATA[ https://cdn.theoplayer.com/demos/lo.mp4 ]]>
</MediaFile>
<MediaFile delivery="progressive" bitrate="600" width="640" height="480" type="video/mp4">
<![CDATA[ https://cdn.theoplayer.com/demos/me.mp4 ]]>
</MediaFile>
<MediaFile delivery="progressive" bitrate="1024" width="480" height="352" type="video/mp4">
<![CDATA[ https://cdn.theoplayer.com/demos/hi.mp4 ]]>
</MediaFile>
</MediaFiles>
独自の広告を挿入してみる
上記にて確認した VAST の各パラメータを調整して、独自の広告挿入をやってみます。
XML ファイルの作成
今回は以下の XML ファイルを作成しました。
特に難しい事はしておらず、上記にて紹介した各種パラメータをそれぞれ変更した形となりますので、手元のテストファイルは環境に合わせて変更してお使いください。
広告として挿入する動画ファイルについては、動画プレイヤーから取得可能な URL を指定しましょう。
preroll.xml
<VAST version="2.0">
<Ad id="229">
<InLine>
<AdSystem version="4.11.0-10">LiveRail</AdSystem>
<AdTitle>
<![CDATA[ CM TEST ]]>
</AdTitle>
<Creatives>
<Creative sequence="1" id="331">
<Linear>
<Duration>00:00:05</Duration>
<VideoClicks>
<ClickThrough>
<![CDATA[ https://classmethod.jp/ ]]>
</ClickThrough>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive" width="1280" height="720" type="video/mp4">
<![CDATA[ https://xxxxxx/xxxxxx.mp4 ]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
XML ファイルの配置
作成した XML ファイルは動画プレイヤーから参照する必要があるため、今回は作成した XML ファイルを S3 に配置して公開します。
動画プレイヤー（THEOplayer）の修正
動画プレイヤーから上記 XML を参照する様に、スクリプト内の URL を修正します。
// Advertisement configuration
ads: [{
"sources": "https://xxxxxxx.s3-ap-northeast-1.amazonaws.com/preroll.xml",
"timeOffset": "start",
"skipOffset": 2
}]
THEOplayer を埋め込んだ最終的な HTML ファイルは以下になります。
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- THEOplayer library and css -->
<script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx/THEOplayer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx/ui.css" />
</head>
<body>
<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
<script>
var element = document.querySelector(".theoplayer-container");
var player = new THEOplayer.Player(element, {
libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
});
// OPTIONAL CONFIGURATION
// Customized video player parameters
player.source = {
sources: [{
"src": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
"type": "video/mp4"
}],
// Advertisement configuration
ads: [{
"sources": "https://xxxxxxx.s3-ap-northeast-1.amazonaws.com/preroll.xml",
"timeOffset": "start",
"skipOffset": 2
}]
};
</script>
</body>
</html>
確認してみた
実際に作成した HTML を開き、広告が挿入されているか確認してみました。
クリックの動作なども見せたかったため、画面録画した動画を載せておきます。
動画プレイヤーを 3回リロードし、それぞれ動作を確認しています。
- 1回目 ... 動画広告が流れ、5秒（VAST で指定した値）動画が流れた後に本編動画が再生開始される事
- 2回目 ... 動画広告が流れ始めてから 2秒後にスキップボタンがアクティブになり、広告がスキップできる事
- 3回目 ... 広告をクリックすると VAST にて指定した URL が開く事
それぞれ問題なく動作することを確認できました。
おわりに
THEOplayer を使用して、静的な動画広告の挿入をやってみました。
動的な動画広告挿入（AD サーバなどの利用）はハードルが高いですが、決められた動画を広告として挿入するだけであればお手軽に実現することができます。
以上、AWS 事業本部の大前でした。
