HTML5 VIDEO 映像再生キオスク端末のまとめ

HTML5 VIDEO 映像再生キオスク端末のまとめです。

映像再生キオスク端末というと古くはMacromediaのDirectorのプロジェクタファイル、近年ではFlash、または専用に作られたアプリケーションが主流でした。

これからの時代、これらに変わるものとしてHTML5のVIDEO機能が使えるのではないかと昨年から筆者は取り組んでいます。

はじめに

HTML5からVIDEOタグがサポートされました。これは従来FlashやQuickTimeなどのプラグインを使用しなければならなかったHTMLへの映像埋め込みが、今までの画像埋め込みと同じ感覚で行える機能です。
こちらの話は検索していただけると沢山の解説サイトがあるので割愛します。

このHTML5 VIDEOですが、実際はすべてのブラウザに対して同じ仕様が通るわけではありません。中でも、最大の問題点は、ビデオコーデックの種類が各ブラウザで違うということです。

結局、マルチブラウザ対応にはまだ至っていないというのが現状なのですが、これは裏を返せば、「特定環境下では使える」と言うことです。

今回、限定する環境は、OSが「Windows7」でブラウザが「InternetExplorer10」です。
※Windows8ではデフォルトで、従来のWindowsの様にスタートアップで起動時にアプリケーションを立ち上げることが出来ません。
※InternetExplorerは標準でKIOSKモードというWeb操作以外をユーザ側にさせないモードを搭載しています。この機能を使用します。
参考リンク：Internet ExplorerのKIOSKモード

尚、筆者はHTMLに関しては独学ですので解説にあたっての表記等、ご指摘がありましたらコメントを下さい…

HTML5 VIDEOにおける映像フォーマットと再生時の挙動

ブラウザ内完結で映像が再生できることは先で述べましたが、下記にファイルフォーマットと再生上の制限を記載します。

・InternetExplorerにおける動画コーデックはH.264、ファイル拡張子.mp4のみ
・動画再生は100%フレームで再生される
※セーフティ概念を持たない→セーフティが考慮されたSDコンテンツ時に問題になる
・再生フレームレートは30fps程度でインターレースには非対応
※再生はOKですがジャギィが発生します。垂直ピクセル数が等倍でも再生が汚くなります
・ビデオレベルは基本的には0-255のフルスケール
※PCのグラフィック環境によっては16-235のビデオスケールになる模様(現在調査中)
参考リンク：
インターレース処理とは
映像のセーフティゾーンの概念

以上は動画を製作時に問題になる部分です。

映像再生キオスク端末化にあたってのHTML上での制限

キオスク端末なので基本的にはマウスエミュレーション(画面へのタッチ動作がマウス操作と同じく、onMouse～系のイベント発生させる)のタッチパネルで行うので、操作を左クリックのみに限定や各コマンド発生の調整が出来ますが、マウスエミュレーションが実現できなく、Windows Touchで操作を行わなければならない場合は調整が出来ません。

参考：Eloタッチスクリーン・プロパティ
※タッチパネルシステムズ上でのドライバ表記はXP用とされています。
XP用→マウスエミュレーション、WindowsVista･7･8用→Windows Touchです。要注意です。

と言うことで、今となっては古い手(笑)で制限をかけます。
※余談ですがWindows Touchから貰えるonMouse～系のコマンドのインターバルがデバイスによって様々です。Windows Touchで行うタッチ動作がそのままでは即時onMouseDownに置き換えられません。HTML上でWindows Touchコマンドが扱えれば良いのですが、自分の知識の限界により、「できない」と判断しています。

追記：らどこさんより参考になるリンクをいただきました。
IE 10および Metro スタイル アプリケーションでのタッチ入力
http://blogs.msdn.com/b/ie_jp/archive/2011/10/14/10225171.aspx
これは参考になりますね！

それにプラスしてInternetExplorer上を単純にキャンバスとして扱えるように調整をします。

■HTML全体への制限■
onSelectStart="return false" → ドラッグによるテキストの選択を禁止(キャンセル動作)
onContextmenu="return false" → 右クリック禁止(キャンセル動作)
ondragstart="event.returnValue = false" → 画像ファイルのドラッグ選択を禁止(キャンセル動作)

■HTMLスタイルシートへの制限■
BODY{overflow-x:hidden;} → スクロールバーのX非表示
BODY{overflow-y:hidden;} → スクロールバーのY非表示
BODY{cursor:crosshair;} → マウスカーソルをクロスヘア表示
BODY{background-color:black;} → 背景を黒
BODY{margin-top:0; margin-bottom:0; margin-left:0; margin-right:0;} → TABLEを真の中央へ(トップ&レフトの隙間潰し)

■TABLEへの制限■
border="0" → セルの線幅指定。0にすると完全に見えなくなる
cellpadding="0" → セル内の余白指定。0にすると完全にセル内余白がなくなる。
cellspacing="0" → セル同士の間隔指定。0にすると完全にセル同士の間隔がなくなる

HTML5 VIDEOで扱えるコマンド

HTML5 VIDEOで扱えるコマンドを探すと沢山のサイトがあります。

中でも一番参考になったPDFがこちらです。

参考外部リンク：「一目でわかる「HTML5 VIDEO」の仕組み」
http://www.ric.co.jp/book/contents/pdfs/897_3_1.pdf

様々なコマンドに対応しており、DVDオーサリング程度のエミュレーションならばHTML5 VIDEO上で完結できることがわかると思います。

今回、使用するコマンドはVideoプロパティの「ended = 再生終了状態」で、再生している映像の「再生終了」を取得します。
「再生終了」を取得と同時にURLジャンプをすることにより、
メニュー画面→動画選択→再生→再生終了→メニュー画面というシーケンスが実現できます。

■Videoプロパティの「ended = 再生終了状態」取得■

HTML上
var NextAddr="index"; → 変数「NextAddr」に「index」を定義
videoタグに対して、id="video_1"とIDを振る


外部参照JavaScript
var video = document.getElementById("video_1");
video.addEventListener("ended",
function()
{
location.href = NextAddr + ".html";
}, false);
 → イベントリスナで"video_1"の"ended"(終了)を検知し、変数「NextAddr」+.htmlに定義されたアドレスへジャンプする

HTMLのレイアウト

ここからデザインの話です。
映像再生キオスク端末を作成するにあたって、一番最初に決めなければならないのはターゲットとなる解像度です。

ターゲット解像度を決めたら、画面のレイアウトを決めます。

参考レイアウト
使用しているソフトはAdobe PhotshopCS6です。

上図ではわかりやすいようにスライスサイズを載せました。
ここで書かれているwidthとheightがHTMLでのセル切りの時に必要になる数値です。

HTMLでのセル切り

このスライスされた範囲にリンクを貼ります。つまり、このセル範囲がHTML5 VIDEOを置ける範囲であり、ボタンとしてコマンドが有効になる範囲です。

後は、背景画像とスライス書き出しした画像をHTMLへ記述していきます。
参考までに仮に作ったものをアップしておきます。

下記からダウンロードしてください。
http://www.holycater.sakura.ne.jp/zip/html5_video.zip
※こちらが購入しているフリー動画素材を使用していますが、再配布は禁止です。

まとめ

上記で作成したHTMLをKIOSKモードで立ち上げれば完成です。
※細かい、ビデオエンコードやPhotshopの操作の話はこの枠に収まらないので省略しています。

お分かりいただけると思いますが、jQuery等のフリーJavaScriptを一切使用していません。すべての動作を筆者が説明できる範囲での解説となっています。
jQueryと組み合わせると、ポップアップウィンドウでのビデオ再生や動的な背景が実現できると思います。