Cisco Vision Dynamic Signage Director での HTML コンテンツ作成のガイドライン
このモジュールでは、HTML5 コンテンツを作成して Cisco Vision Dynamic Signage Director のメディア プレーヤーで再生するための一般的なガイドラインについていくつか説明します。
注: ここで説明するガイドラインは、通常は Cisco Vision Dynamic Signage Director のメディア プレイヤーに有効です。ただし、要素によっては期待どおりに表示されない場合があります。本番環境に導入する前に、すべての HTML コンテンツをテストしてください。詳細については、「Cisco Vision Dynamic Signage Director での HTML コンテンツの検証」を参照してください。
■
ハードウェアアクセラレーションを使用する HTML 機能のベスト プラクティス
■
HTML5 のコンテンツの制限事項
■
HTML5 ページの作成に関するガイドライン
■
タッチスクリーンの HTML5
■
アニメーションおよびアドオン ライブラリ
■
ネットワーク遅延の回避策
■
Cisco Vision Dynamic Signage Director での HTML コンテンツの検証
■
UHD での回転出力
ハードウェアアクセラレーションを使用する HTML 機能のベスト プラクティス
注: このセクションでは、メディア プレーヤーで一般的に動作するためのハードウェア アクセラレーションの機能およびガイドラインの一部を説明します。ここに記載されていない制限事項を伴う場合があります。
次の機能とエフェクトはハードウェア アクセラレーションされるため使用をお勧めします。
■
CSS トランスフォームと組み合わせた SVG グラフィック
■
-webkit-transform (推奨)または transform を使用するエフェクト
■
-webkit-animation-* および -webkit-keyframes を使用するアニメーション
■
すべての CSS トランジション( -webkit-transition など)
注: 「 -webkit- 」プレフィックスは必ずしも使用する必要はありませんが、ベスト プラクティスとして使用をお勧めします。
次の機能はハードウェア アクセラレーションされないため使用を避けるべきです。
■
-ms-transform 、 -moz-transform 、または -o-transform
注: -ms-、-moz-、および -o- で始まる他の未サポートのクロム機能についても使用を避けてください。
■
Javascript ベースのアニメーションおよびエフェクト。
■
ビデオ( hwz 属性でタグ付けされていない場合、またはhwz 属性が OFF に設定されている場合に のみ )。
■
すべてのコンテンツを 1 つの非常に大きな HTML ページにロードするようなサイトをロードしたり参照することは避けてください。そうしたサイトでは大量の物理メモリまたは仮想メモリが必要になります。
注: デフォルトでは、ビデオ要素は hwz 属性でタグ付けしない限りハードウェア アクセラレーションされないため、推奨またはサポートされません。使用している DMP モデルに応じて、最大 2 つのビデオ リージョンを同時に画面に表示できます。これには、Cisco Vision Dynamic Signage Director からの他のライブ ビデオ リージョンやローカル ビデオ リージョンが含まれます。
HTML5 のコンテンツの制限事項
HTML5 ページに関連するコンテンツの制限事項を次に示します。
■
HTML5 コンテンツを汎用の Web ブラウザとして使用しないでください。メディア プレーヤーは、Web 閲覧ツールではなく、インタラクティブ機能を持った HTML5 プレーヤーです。
■
メディア プレーヤーは Flash コンテンツをサポートしないため、Flash コンテンツが埋め込まれている HTML5 ページを正しく表示することはできません。Adobe Creative Suite などのほとんどの Flash 作成アプリケーションは、Flash コンテンツを HTML5 としてエクスポートできるツールを備えています。
■
メディア プレーヤーは Media Source Extension(MSE)をサポートしていません。
■
ビデオ ストリーミング サイトによっては、サポートされていないコーデックを使用している場合があります。
表 1 に、いくつかのタイプのストリーミングとそれらのコーデックのリストを示します。
表 1 サポートされているビデオ ストリーミング プロトコル
タイプ |
説明 |
HLS(HTTP ライブ ストリーミング) |
カプセル化:ビデオ ストリーム用の MPEG2-TS(音声のみのストリームの raw AAC または MP3)。 コーデック:H.264(またはビデオ ストリームの場合は H.265)。 |
UDP/RTP |
UDP/RTP エンコーダ:Exterity e3535 および Comm-Tec ProTUNE III カプセル化:MPEG2-TS または MPEG4。 注: ビデオ ストリームが RTSP を使用してエンドポイント間の接続を制御している場合、ビデオは MPEG2-TS を使用してカプセル化する必要があります。 コーデック:H.264(またはビデオ ストリームの場合は H.265)。 |
HTTP |
コーデック:現在サポートされているすべてのビデオ コーデック(UHD モデルの場合は H.265 を含む)。 |
暗号化プロトコル |
DMP は、複数のビデオ暗号化プロトコル(HTML 経由)をサポートしています。 |
■
HTML5 ページのイメージ サイズは 1920 X 1080 X 32 bpp に制限されます。メディア プレーヤーは、この制限より大きなイメージを含むページの表示には失敗します。
■
UHD ビデオを使用している場合でも、HTML キャンバスのサイズは 1920 X 1080 です。この制約事項は、すべての DMP モデルに適用されます。
■
一部の新しいコンテンツを表示する際には歪みのあるアニメーションを使用しないでください。
■
Web DB/インデックス DB/ローカル ストレージの設定は、CV-HD2 では無視されます。
■
microSD カードを搭載した CV-HD2 には 60 GB のストレージがあります。
■
外部 HTML ページの場合、ビデオ(特にストリーミング以外のビデオ)を使用することは推奨されません。
HTML5 ページの作成に関するガイドライン
HTML5 ページの作成時には次の注意事項に従ってください。
■
HTML5 ページがサイネージ表示と同じ縦横比であることを確認してください。
画面より小さなウィジェットに HTML5 コンテンツを表示したい場合、そのウィジェットと同じアスペクト比になるようにページを合わせます。
■
HTML ページを構築するときはリード Div を使用し 0,0 に合わせて配置します。これにより正しい配置が可能になります。
■
ページ更新の動作に注意を払ってください。ページが更新されるたびに、プレーヤーはすべてのページ要素を(キャッシュ処理せずに)再取得します。ページがリモート サーバ上にホストされている場合、ページ要素は接続を介して到着した時にロードされます。このため頻繁に更新されるページでは見た目の問題が発生します。
ページの更新頻度が高くなると予想される場合は、JavaScript や Ajax その他のコードを含めて、ページ更新時にページ上の動的な要素のみがリロードされるようにします。
■
デジタル サイネージに Web ページを使用する場合は、スクロール バーの非表示化を検討してください。
スクロールバーを非表示にするには、次のスニペットを CSS コードに追加します。
::-webkit-scrollbar { width: 0px; height: 0px;
レンダリングされたバージョンとサポート
表 2に、各ファームウェア バージョンで使用される Web レンダリング エンジンを示します。
表 2 使用した Web レンダリング エンジン
Web レンダリング エンジン |
ファームウェア バージョン |
Cisco Vision Director リリースバージョン |
Chromium 69 |
8.3.22 |
Cisco Vision Director リリース 6.4 |
Chromium 69 |
8.1.69 |
Cisco Vision Director リリース 6.3 |
Chromium 65 |
8.0.x |
Cisco Vision Director リリース 6.2 |
Chromium 45 |
7.1.x、7.0.x、6.2.x |
Cisco Vision Director リリース 6.1.x、6.0.x |
Chromium 37 |
6.1.x、6.0.x |
StadiumVision Director 5.0.x |
WebKit |
5.1.x、5.0.x、4.8.x、4.7.x |
StadiumVision Director 4.0.x |
注意: 外部 Web コンテンツについてはパフォーマンスが保証されない、またはテストされていないことに留意してください。外部 Web コンテンツは DMP の動作に悪影響をおよぼす場合があります。外部 web コンテンツをテストしてください。
タッチスクリーンの HTML5
HTML5 ページでのタッチスクリーン操作が適切となるように、タッチスクリーン デバイスがヒューマン インターフェイス デバイス(HID)に準拠していて、標準の HID ドライバを使用していることを確認してください。
注: 製造元によっては、HID のサポートを謳っていながらカスタム ドライバを使用している場合があります。標準の HID ドライバを使用していることを確認してください。
アニメーションおよびアドオン ライブラリ
このセクションでは、メディア プレーヤーの WebKit エンジンまたは Chromium エンジンに対するアニメーションとアドオン ライブラリのサポートに関する一般的なルールをいくつか説明します。
■
ベクター アニメーション
■
ビットマップ アニメーション
■
CSS トランスフォーム
■
アドオン ライブラリ
ベクター アニメーション
SVG プロトコルを使用してベクター アニメーションを指定してください。
ビットマップ アニメーション
ビットマップ アニメーションは 1080p HTML キャンバスの 1/3 以下の場合にスムーズに表示されます。キャンバスのサイズを 720p に設定すると、より大きい高品質のアニメーションで画面を占めることができます。
CSS トランスフォーム
すべての CSS トランスフォームは WebKit トランスフォームとして指定する必要があります。 <div> またはグラフィック要素のトランスフォームを実行するときに、トランスフォームをインラインで指定することは推奨されません。
「top」 および 「left」 プロパティを使用するアニメーションは CPU を使用して描画されます。よりスムーズなアニメーションにするために、作業を GPU にオフロードする代わりに、 translate() および translate3d() メソッドを使用することを推奨します。
次のコードは、有効な CSS トランスフォームの例を示します。
-webkit-animation-name:flipon;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:2s;
@-webkit-keyframes flipon
0% {-webkit-transform:rotateY(0deg);}
30% {-webkit-transform:rotateY(-90deg);}
100% {-webkit-transform: rotateY(360deg);} image
アドオン ライブラリ
jQuery および Prototype ライブラリは、メディア プレーヤーでサポートされます。一般的なルールとして、WebKit ベースのトランスフォーメーションを使用すると、アニメーションのどのアドオン ライブラリも機能します。特定のライブラリに互換性があるかどうかを判断するには、ライブラリの非縮小(non-minified)バージョンを調べて、WebKit ベースのトランスフォームを使用しているかどうかを確認してください。
ネットワーク遅延の回避策
メディア プレーヤーが URL から HTML コンテンツをロードする際に、ネットワークのレイテンシに基づく遅延が生じることがあります。この問題を軽減するには、事前にロードされたイメージを追加してください。
Cisco Vision Dynamic Signage Director での HTML コンテンツの検証
ベスト プラクティス:常に Cisco Vision Dynamic Signage Director と DMP でコンテンツをテストしてください。
■
HTML コンテンツのテストを Cisco Vision Dynamic Signage Director システムから独立して行うことも選択できますが、パフォーマンスはブラウザによって異なります。
■
ラップトップでの独自のテストから得られる結果が、Cisco Vision Dynamic Signage Director 内で期待どおり得られる保証はありません。
ご使用のコンピュータには DMP の容量を超える仮想メモリや物理メモリがあり、グラフィックの処理にも違いがあります。
HTML の基本的な機能を試すことのみを目的として表示の大まかななテストを行う場合は、次のガイドラインを考慮してください。
■
ご使用のリリース用の DMP ファームウェアに一致するバージョンの Chromium ブラウザ ソフトウェアをラップトップにインストールします。
■
Chromium のバージョンは DMP ファームウェアのリリースによって異なります。
Cisco Vision Dynamic Signage Director リリース 6.3 用 DMP ファームウェアは、Chromium バージョン 69 を使用しています。
UHD での回転出力
■
CV-UHD2 および CV-UHD の DMP は、60p で縦方向の HD ビデオ(1080 X 1920)を出力できます。複数の縦方向のビデオ ウィンドウがサポートされています(ソース ファイルと出力の両方で最大 60p)。ただし、すべてのビデオ ウィンドウの合計領域は 1080 X 1920 を超えないようにする必要があります。
■
UHD 出力モードの使用時に、HTML ページを表示してビデオを回転させるとビデオがちらつきます。この現象は、ビデオが HTML ページの一部ではない場合でも発生します。
HD での回転出力
■
CV-HD2 および CV-HD DMP は、60p で縦方向の HD ビデオ(1080 x 1920)を出力できます。ソース ビデオのフレーム レートは 30p を超えないようにする必要があります。
JavaScript での時刻のローカリゼーション
JavaScript の toLocaleTimeString() コールは、ローカライズされた時刻形式を取得しません(12 時間ではなく 24 時間のクロックを取得します)。代わりに、時間と分のクロックはデフォルトでメディア プレイヤーの 24 時間に設定されます。Javascript で 12 時間のクロックを使用して時間を表示するには、回避策として次のコードを使用してください。
1.
次の関数を作成します。
function format12Hour(date)
mm = date.getMinutes(); ss = date.getSeconds() if((hh % 12) == 0) hh = 12; else
// Pad zero values to 00 hh = (zero+hh).slice(-2); mm = (zero+mm).slice(-2);
ss = (zero+ss).slice(-2);
return hh + ':' + mm + ':' + ss + ' ' + ((date.getHours()
2.
必要に応じて、秒情報を表示しないようにするには、前述の「return」の行を次に置き換えます。
return hh + ':' + mm + ' ' + ((date.getHours() < 12) ? 'AM' : 'PM');
3.
次のように HTML スクリプトに関数を実装します。
var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate();
if (!startDateTime.isDateOnly()) {
dateString += " -- " + format12Hour(startJSDate);