デジタルサイネージは、iPad本体だけでも標準のスライド機能やミュージックビデオなどを使えば簡単に実現できますし、アップルが用意している「iPad Dock Connector - VGAアダプタ」で外部ディス
プレイやプロジェクターと接続すると、より大きな画面に広告を表示できます。
今回はこのVGAアダプターとiPad、HTML5 Videoを組み合わせて、大画面で動画を再生するデジタルサイネージを作ります。HTML5なら、専用のアプリケーションを作らなくても手軽にサイネージ用のページを作成できます。
なお、今回のサンプルではiPadのWiFiモデルを使用し、通信回線もWiFiの利用を前提にしています。3G回線ではダウンロードに非常に時間がかかり、実用的ではありません。
ハードウェアとコンテンツを準備する
最初に、アップルが提供しているVGAアダプターを用意します。
●Apple iPad Dock Connector - VGAアダプタ
http://store.apple.com/jp/product/MC552ZM/A
VGAアダプターでiPadを外部ディスプレイに接続すると、iPadの画面サイズ（ピクセル数）と同じ1024×768ドットで映像が表示されます。
●iPad映像仕様
http://www.apple.com/jp/ipad/specs/
なお、iPadとVGAアダプターの間にDockなどを接続すると映像が出力されませんので、「iPad - VGAアダプタ - ディスプレイ」のように接続してください。
次に、デジタルサイネージとして再生する動画ファイルを用意します。iPadで再生できるのはQuickTime形式／H.264コーデックです。フレームレートは最大30fpsで、30fps以下なら24フレームでも15フレームでも構いません。インターレース形式よりもプログレッシブの方がよいでしょう。都合のよい動画が見つからない場合は私のサイトにハイビジョン素材がありますので利用してください。
●ハイビジョン映像素材
http://www.openspc2.org/HDTV/footage/HD/60i/
http://footage2.openspc2.org/HDTV/footage/HD/60p/
以上でハードウェアとコンテンツ（動画）の準備は完了です。次に、VGAアダプターから映像を出力する方法を考えてみましょう。
意外に不便なVGAアダプター
VGAアダプターを使えば、iPadのホーム画面がそのまま外部ディスプレイに表示されると思った方もいるかもしれませんが、残念ながらiPadでは外部出力できるアプリケーションが決まっています。標準アプリではYouTube、ビデオ、iTunes／ミュージックビデオ、有料アプリではKeynoteなど一部のみがVGA出力をサポートしており、サポート外のアプリの画面はVGAアダプターを使っても表示できません。
VGAディスプレイに出力できるアプリケーション
iPadをデジタルサイネージとして利用しようとすると、このアプリケーションの問題が発生します。たとえば1つの動画をエンドレスで再生し続けたい場合、VGA出力に対応しているアプリを地道に探すか、独自のアプリを用意するしかありません。
なるべく特定のアプリケーションに依存せず、手軽にデジタルサイネージを作成したい、無料ならなお良い——と考えたときに使えるのがiPadの標準ブラウザー「Safari」です。実際にiPadのSafariを使って、動画を外部ディスプレイに出力してみましょう。
Safariでも制限付きながらVGAディスプレイに表示できる
前にも書いたように、VGAアダプターはiPadに表示されている画面をそのまま出力するわけではありません。Safariでも状況は同じで、現在表示しているWebページがVGAディスプレイに表示されるわけではありません。ページが表示されないのにSafariで動画を再生するのはおかしいのでは？ と思うかもしれませんね。
実はHTML5 Videoを使った動画をSafariで再生すると、自動的に動画部分のみがVGAアダプターを通じて外部ディスプレイに表示されます。VGAアダプターに出力されるのは再生中の動画だけで、文字や画像などの他の要素は出力されません。このため、動画を外部ディスプレイに表示したいときは、以下のようにHTML5のvideo要素を書くだけで済みます。逆にいえば、外部ディスプレイには表示したくない注意書きや説明などをページ内に書いても構いません。
デジタルサイネージの場合、繰り返し再生するのが一般的ですので、video要素にはloopを指定しておきます。これで動画がエンドレスで繰り返し再生されます。
ただし、iPadのSafariはvideo要素のautoplay属性に対応していないため、自動再生はできません。ユーザーが一度、iPad上で再生ボタンを押す必要があります。
●サンプル01[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Video + iPad + VGA Adapter</title>
</head>
<body>
<h1>HTML5 Video + iPad + VGA Adapter</h1>
<video id="myVideo"
src="movie/sample.mov"
width="1024"
height="512"
loop controls
></video>
<p>同じ映像を繰り返し再生します。</p>
</body>
</html>
1つの動画を再生し続けるだけでなく、状況によって動画を切り換えたい場合があります。フォームのボタンをタッチしたら動画を切り換えるプログラムがサンプル02です。
動画を切り替えるには、URLを設定した後にload()メソッドを使って動画データを読み込ませます。videoオブジェクトのsrcプロパティに再生したい映像のURLを設定しただけでは動作しません。繰り返し再生させるためloopプロパティにtrueを指定し、その後play()メソッドを呼び出せば動画が再生されます。
動画ファイルのデータサイズが大きい場合、再生が開始してもデータのダウンロードが間に合わず、途中で止まってしまうことがあります。この問題を回避するには、以下のようにcanplaythroughイベントを捕捉してからplay()メソッドを呼び出します。canplaythroughイベントは、現状の速度で読み込みを続ければ途切れることなく動画を再生できる、というタイミングで発生します。実際に試してみると途中で再生が途切れてしまうことはあり、確実ではありませんが、最初からplay()メソッドで再生するよりはスムーズに再生できます。
vObj.addEventListener("canplaythrough", function(){
vObj.play();
}, true);
●サンプル02[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Video + iPad + VGA Adapter</title>
<script type="text/javascript" src="js/signage.js"></script>
</head>
<body>
<h1>HTML5 Video + iPad + VGA Adapter</h1>
<video id="myVideo"
src="movie/sample1.mov"
width="1024"
height="512"
loop controls
></video>
<form>
<input type="button" value="サンプル1の映像にする"
onclick="setMovie('movie/sample1.mov')">
<input type="button" value="サンプル2の映像にする"
onclick="setMovie('movie/sample2.mov')">
</form>
</body>
</html>
●サンプル02[JavaScript：signage.js]
function setMovie(url){
var vObj = document.getElementById("myVideo");
vObj.src = url;
vObj.load();
vObj.loop = true;
vObj.addEventListener("canplaythrough", function(){
vObj.play();
}, true);
}
ボタンをタッチして動画を切り換えるだけでなく、スクリプトでも動画は切り換えられます……と断言したいところですが、実際にやってみるとSafariが停止したり落ちてしまったりして正常に動作しないことがありました。以降は、将来のアップデートで問題が解消されるもの、との期待を込めて解説することにします。
まず、再生したい動画のURLを以下のように配列に入れておきます。
var data = [
"movie/sample1.mov",
"movie/sample2.mov",
"movie/sample3.mov",
"movie/sample4.mov",
"movie/sample5.mov"
];
次に、動画を切り換える時間を設定します。なるべく切り換える時間を長くしておくと安定して再生されます。
var intervalTime = 60 * 1000; // 映像を切り換える秒数
video要素にloopを指定すると動画の終わりを検知するendedイベントが発生しないため、今回はloopを指定しません。サンプル03では再生開始から1分が経過し、かつ動画の再生が終了した時点で次の動画に切り換えます。あまり短いタイミングにすると再生される前に切り替わってしまうことがあるため、このような時間としました。
指定時間が経過している場合は変数endFlagがtrueになり、そうでない場合は最初から再生されるようにplay()メソッドを呼び出します。
var vObj = document.getElementById("myVideo");
vObj.addEventListener("ended", function(){
if (!endFlag) {
vObj.play(); // 指定された時間が経過していなければ繰り返し再生する
return;
}
：
}, true
あとはサンプル02と同様に、videoオブジェクトに再生する動画のURLを指定して再生します。実際のプログラムがサンプル03です。
前にも書いたように、このプログラムはiPadで何回か映像が切り替わった後、Safariが落ちたりハングアップしてしまいます。現時点では実用的ではありませんが、将来動作することを期待しています。
1分ごとに映像が切り替わって再生される。現状では何度か動画が切り替わった後、ハングアップしたりSafariが落ちてしまう
●サンプル03[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Video + iPad + VGA Adapter</title>
</head>
<body>
<h1>HTML5 Video + iPad + VGA Adapter</h1>
<video id="myVideo"
src="movie/sample1.mov"
width="1024"
height="512"
controls
autoplay
></video>
<p>
1分ごとに再生する映像を切り換えます。
</p>
<div id="stat"></div>
<script type="text/javascript" src="js/signage.js"></script>
</body>
</html>
●サンプル3[JavaScript：signage.js]
// 再生する映像のURL
var data = [
"movie/sample1.mov",
"movie/sample2.mov",
"movie/sample3.mov",
"movie/sample4.mov",
"movie/sample5.mov"
];
var count = 1;
var endFlag = false; // 映像再生フラグ
var intervalTime = 60 * 1000; // 映像を切り換える秒数
var vObj = document.getElementById("myVideo");
// 1回の再生が終了した時に発生するイベントを捕捉
vObj.addEventListener("ended", function(){
if (!endFlag) {
vObj.play(); // 指定された時間が経過していなければ繰り返し再生する
return;
}
endFlag = false;
var url = data[count++];
count = count % data.length; // 配列で用意された映像の数に収まるようにする
vObj.src = url;
vObj.load();
vObj.loop = false; // ループさせずendedイベントを発生させるようにする
}, true);
// 映像が再生可能になった時に処理
vObj.addEventListener("canplaythrough", function(){
vObj.play();
endFlag = false;
setTimeout("endFlag=true", intervalTime); // 1分後に処理
}, true);
デジタルサイネージ利用のポイント
最後に、iPad＋VGAアダプターの組み合わせで動画を使ったデジタルサイネージを作成するポイントをまとめておきます。
■動画のファイルサイズに注意する
動画データは極力小さいファイルサイズにします。10MBを超えるとデータのダウンロードに時間がかかり、動画をスムーズに切り換えられません。5MB程度であれば快適にダウンロードして再生できます。QuickTime 7 Proを使ってiPad用の
動画を書き出す場合には「インターネットストリーミング」のオプションにチェックを入れましょう。
■iPadの自動ロックを解除する
デジタルサイネージとして使用する場合は、以下のようにiPadに自動ロックがかからないように設定しておきます。自動ロックがかかるとVGA出力も止まってしまい、ディスプレイの表示が消えます（実際にはiPadの画面が先に消え、しばらくしてVGAディスプレイ側が消えます）。
■連続稼働時間と実用性
iPadにVGAアダプターを接続すると外部電源の供給ができなくなるため、内蔵バッテリーの稼働時間が実用上の課題になります。単純に動画をiPad＋VGAアダプタで連続再生する場合、計算上は6時間程度は大丈夫なようです。iPad側の液晶の輝度を抑えたり音量を小さくしたりすれば、もう少し長時間使えるでしょう。電源を兼ねたVGAアダプターが登場すればデジタルサイネージとしての実用度も上がりますので、期待したいところです（サンプル03のように多少複雑な処理も正常に動作するとさらによいのですが）。
0 件のコメント:
コメントを投稿