インタラクティブビデオビューアのカスタマイズ customizing-interactive-video-viewer

Last update: Thu Sep 23 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

インタラクティブビデオビューアのすべての視覚的なカスタマイズと、ほとんどの動作のカスタマイズは、カスタムCSSを作成することで行います。

推奨されるワークフローは、適切なビューアの初期設定のCSSファイルを別の場所にコピーし、カスタマイズして、カスタマイズしたファイルの場所をstyle=コマンドで指定することです。

初期設定のCSSファイルは次の場所にあります。

<s7_viewers_root>/html5/InteractiveVideoViewer_dark.css

このビューアには、「ライト」と「ダーク」カラースキームの2つのCSSファイルが標準で用意されています。デフォルトでは「暗い」バージョンが使用されますが、次の標準CSSを使用すると、「明るい」バージョンに簡単に切り替えることができます。

<s7_viewers_root>/html5/InteractiveVideoViewer_light.css

カスタムのCSSファイルには、初期設定のCSSファイルと同じクラス宣言が含まれている必要があります。クラス宣言を省略した場合、ビューアは正しく機能しません。ビューアには、ユーザインターフェイス要素の初期設定のスタイルが組み込まれていません。

カスタムCSSルールを指定する別の方法は、Webページ上またはリンクされたいずれかの外部CSSルール内で、埋め込みスタイルを直接使用することです。

カスタムCSSを作成する場合、ビューアはコンテナのDOM要素に.s7interactivevideoviewerクラスを割り当てることに注意してください。 style=コマンドで渡された外部CSSファイルを使用する場合は、CSSルールの子孫セレクターで.s7interactivevideoviewerクラスを親クラスとして使用します。 Webページで埋め込みスタイルを使用する場合は、次のようにコンテナのDOM要素のIDを使用してこのセレクターを修飾します。

#<containerId>.s7interactivevideoviewer

レスポンシブデザインCSSの構築 section-0bb49aca42d242d9b01879d5ba59d33b

CSSで様々なデバイスおよび埋め込みサイズをターゲットにして、ユーザーのデバイスや特定のWebページのレイアウトに応じてコンテンツの表示を変えることができます。この方法には、レイアウト、ユーザインターフェイス要素のサイズ、アートワークの解像度などが該当しますが、これらに限定されません。

ビューアでは、レスポンシブデザインCSSの作成メカニズムが2つサポートされています。CSSマーカーと標準のCSSメディアクエリ。これらのメカニズムは、個別に、または一緒に使用できます。

CSSマーカー

レスポンシブデザインCSSの作成に役立つように、ビューアではCSSマーカーがサポートされています。これらのマーカーは、特別なCSSクラスです。実行時のビューアサイズと、現在のデバイスで使用されている入力タイプに基づいて、これらの要素が最上位のビューアコンテナ要素に動的に割り当てられます。

CSSマーカーの最初のグループには、.s7size_large、.s7size_medium、.s7size_smallの各クラスが含まれます。これらは、ビューアコンテナの実行時の領域に基づいて適用されます。ビューアの領域が一般的なデスクトップモニターと同じかそれ以上の場合は、 .s7size_largeが使用されます。領域が一般的なタブレットデバイスに近い場合は、.s7size_mediumが割り当てられます。携帯電話の画面に似た領域に対しては、.s7size_smallが設定されます。これらのCSSマーカーの主な目的は、画面やビューアサイズごとに異なるユーザーインターフェイスレイアウトを作成することです。

CSSマーカーの2番目のグループには、.s7mouseinputと.s7touchinputが含まれます。現在のデバイスにタッチ入力機能がある場合、マーカー.s7touchinputが設定されます。それ以外の場合は、.s7mouseinputが使用されます。通常、タッチ入力にはより大きな要素が必要なので、これらのマーカーは、入力タイプごとに異なる画面サイズを持つユーザーインターフェイス入力要素を作成することを目的としています。

CSSマーカーの3番目のグループには、.s7device_landscapeと.s7device_portraitが含まれます。タッチデバイスが横向きの場合は、マーカー.s7device_landscapeが設定されます。.s7device_portraitは、タッチデバイスが縦向きに回転されるときに使用されます。これらのCSSマーカーは、デスクトップシステムでのみ使用することを目的としています。

以下のサンプルCSSでは、再生/一時停止ボタンのサイズを、マウス入力を持つシステムでは28 x 28ピクセルに設定し、タッチデバイスでは56 x 56ピクセルに設定します。また、ビューアのサイズを大幅に縮小した場合は、ボタンが完全に非表示になります。

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton {
    width:28px;
    height:28px;
}
.s7interactivevideoviewer.s7touchinput .s7playpausebutton {
    width:56px;
    height:56px;
}
.s7interactivevideoviewer.s7size_small .s7playpausebutton {
    visibility:hidden;
}

次の例では、タッチデバイスが縦向きの場合、ビデオコントロールバーの位置はビューアの下部から138ピクセル上になります。それ以外の場合は、ビューアの下部に移動されます。

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7controlbar,
.s7interactivevideoviewer.s7mouseinput .s7controlbar {
 bottom:0px;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7controlbar {
 bottom:136px;
}

ピクセル密度が異なるデバイスをターゲットにするには、CSSメディアクエリを使用する必要があります。次のメディアクエリブロックには、高密度画面に固有のCSSが含まれます。

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

レスポンシブデザインCSSを構築する最も柔軟な方法は、CSSマーカーを使用することです。デバイスの画面サイズだけでなく、実際のビューアサイズもターゲットにでき、レスポンシブデザインのレイアウトに役立ちます。

初期設定のビューアCSSファイルを、CSSマーカーアプローチの例として使用できます。

CSSメディアクエリ

デバイスの検出は、純粋なCSSメディアクエリを使用して実行することもできます。特定のメディアクエリブロック内に含まれるすべての要素は、対応するデバイスで実行された場合にのみ適用されます。

モバイルビューアに適用される場合は、4つのCSSメディアクエリが使用されます。これらはCSSで以下に示す順序で定義されます。

すべてのタッチデバイスに固有のルールのみを含む。

code language-none

code language-none
`@media only screen and (max-device-width:13.5in) and (max-device- height:13.5in) and (max-device-width:799px), only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) { }`

@media only screen and (max-device-width:13.5in) and (max-device-
height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in)
and (max-device-height:799px)
{
}

高解像度の画面を含むタブレットに固有のルールのみを含めます。

code language-none

code language-none
`@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5), only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5) { }`

@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}

すべての携帯電話に固有のルールのみを含む。

code language-none
`@media only screen and (max-device-width:9in) and (max-device-height:9in) { }`

高解像度画面の携帯電話に固有のルールのみを含みます。

code language-none

code language-none
`@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2), only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2) { }`

@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
  only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}

メディアクエリアプローチを使用する場合、デバイス検出を行うCSSを次のように整理する必要があります。

まず、デスクトップ固有のセクションで、デスクトップに固有またはすべての画面に共通のすべてのプロパティを定義します。
次に、4つのメディアクエリを上で定義した順に実行し、対応するデバイスタイプに固有のCSSルールを指定します。

各メディアクエリでビューアのCSS全体を複製する必要はありません。特定のデバイスに固有のプロパティのみが、メディアクエリ内で再定義されます。

CSSスプライト section-9b6d8d601cb441d08214dada7bb4eddc

多くのビューアユーザインターフェイス要素は、ビットマップアートワークを使用してスタイルを設定し、複数の異なる視覚状態を持ちます。良い例は、通常、少なくとも3つの異なる状態を持つボタンです。「up」、「over」、「down」の3つの値を指定します。各ステートには、独自のビットマップアートワークを割り当てる必要があります。

従来のスタイル設定アプローチでは、CSSは、ユーザーインターフェイス要素の状態ごとに、サーバー上の個々の画像ファイルへの個別の参照を持ちます。フルスクリーンボタンのスタイル設定に使用するCSSの例を以下に示します。

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/v2/PlayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/v2/PlayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/v2/PlayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/PlayButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/v2/PauseButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/v2/PauseButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/v2/PauseButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/PauseButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/v2/ReplayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/v2/ReplayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/v2/ReplayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/v2/ReplayButton_disabled.png);
}

このアプローチの欠点は、要素が初めてで操作されると、エンドユーザーがユーザーインターフェイスの応答がちらつく、または遅れるということです。このアクションは、新しい要素の状態の画像アートワークがまだダウンロードされていないために発生します。また、このアプローチは、サーバーへのHTTP呼び出しの数が増えるので、パフォーマンスに若干悪影響を与える可能性があります。

CSSスプライトは、すべての要素状態の画像アートワークを「スプライト」と呼ばれる単一のPNGファイルに組み合わせる別のアプローチです。このような「スプライト」は、指定された要素のすべての視覚的状態を次々に配置します。スプライトを使用してユーザインターフェイス要素をスタイル設定する場合、CSS内のすべての異なる状態に対して同じスプライト画像が参照されます。また、background-positionプロパティは、「スプライト」イメージのどの部分を使用するかを指定するために各状態に対して使用されます。「スプライト」イメージは、適切な方法で構築できます。通常、ビューアは垂直に積み重ねられます。以下に、前述の同じフルスクリーンボタンのスタイル設定の「スプライト」ベースの例を示します。

.s7interactivevideoviewer .s7fullscreenbutton[state][selected]{
 background-image: url(images/v2/FullScreenButton_dark_sprite.png);
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='up'] {
background-position: -84px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='over'] {
background-position: -56px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='down'] {
background-position: -28px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='disabled'] {
background-position: -0px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='up'] {
background-position: -84px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='over'] {
background-position: -56px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='down'] {
background-position: -28px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='disabled'] {
background-position: -0px -1120px;
}

スタイルに関する一般的な注意事項とアドバイス section-95855dccbbc444e79970f1aaa3260b7b

CSSを使用してビューアのユーザインターフェイスをカスタマイズする場合、!IMPORTANTルールの使用は、ビューア要素のスタイル設定に対してサポートされません。特に、ビューアまたはビューアSDKが提供するデフォルトまたは実行時のスタイル設定を上書きする場合は、!IMPORTANTルールを使用しないでください。理由は、適切なコンポーネントの動作に影響を与える可能性があるからです。代わりに、CSSセレクターを適切な特異性で使用して、このリファレンスガイドに記載されているCSSプロパティを設定する必要があります。
CSS内で指定されている外部アセットへのパスは、ビューアのHTMLページの場所ではなく、CSSの場所を基準に解決されます。初期設定のCSSを別の場所にコピーする場合は、このルールに注意してください。デフォルトのアセットもコピーするか、カスタムCSS内でパスを更新します。
ビットマップアートワークの推奨される形式はPNGです。
ビットマップアートワークは、 background-imageプロパティを使用してユーザインターフェイス要素に割り当てます。
ユーザーインターフェイス要素のwidthプロパティとheightプロパティで、論理サイズを定義します。 background-imageに渡されるビットマップのサイズは論理サイズに影響しません。
Retinaのような高解像度画面の高ピクセル密度を使用するには、論理ユーザインターフェイス要素の2倍の大きさのビットマップアートワークを指定します。次に、 -webkit-background-size:containプロパティを適用して、背景を論理ユーザインターフェイス要素のサイズまで縮小します。
ユーザーインターフェイスからボタンを削除するには、CSSクラスにdisplay:noneを追加します。
カラーの値には、CSSでサポートされている様々な形式を使用できます。透明度が必要な場合は、rgba(R,G,B,A)の形式を使用します。それ以外の場合は、#RRGGBBの形式を使用できます。

共通のユーザインターフェイス要素 section-d6330c9be8c444aa9b2a07886e3dbc2a

インタラクティブビデオビューアに適用されるユーザーインターフェイス要素リファレンスドキュメントを次に示します。

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8