ビデオスクラバー

ビデオスクラバは、水平方向のスライダコントロールで、現在再生中のビデオ内の任意の時間位置を動的にシークできます。

また、ビデオの再生時にスクラバーの「ノブ」も移動し、再生中のビデオの現在時間位置を示します。 ビデオスクラバーは常に、コントロールバーの幅いっぱいに表示されます。 ビデオスクラバーのスキン設定が可能です。 CSSを使用して、高さと垂直方向の位置を変更します。

ビデオスクラバーの一般的な外観は、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber 
.s7interactivevideoviewer .s7videoscrubber .s7videotime 
.s7interactivevideoviewer .s7videoscrubber .s7knob

ビデオスクラバーのCSSプロパティ

トップ

パディングを含む上の境界線からの位置。

パディングを含む下の境界線からの位置。

height

ビデオスクラバーの高さ。

background-color

ビデオスクラバーのカラー。

以下に示すCSSクラスセレクターで、背景、再生、読み込みのインジケーターを追跡します。

.s7interactivevideoviewer .s7videoscrubber .s7track 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

トラックのCSSプロパティ

height

対応するトラックの高さ。

background-color

対応するトラックの色。

以下に示すCSSクラスセレクターで、ノブを制御します。

.s7interactivevideoviewer .s7videoscrubber .s7knob

ノブのCSSプロパティ

トップ

ノブの垂直方向のオフセット。

width

ノブの幅。

height

ノブの高さ。

background-image

ノブのアートワーク。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトを参照してください。

以下に示すCSSクラスセレクターで、再生時間の吹き出しを制御します。

.s7interactivevideoviewer .s7videoscrubber .s7videotime

再生時間の吹き出しのCSSプロパティ

font-family

時間表示テキストに使用するフォントファミリ。

font-size

時間表示テキストに使用するフォントサイズ。

color

時間表示テキストに使用するフォントカラー。

width

吹き出し領域の幅。

height

吹き出し領域の高さ。

パディング

吹き出し領域のパディング。

background-image

吹き出しのアートワーク。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトを参照してください。

text-align

吹き出し領域でのテキストの配置。

ビデオスクラバのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

— 高さが10ピクセルで、コントロールバーの上および左端から10ピクセル、35ピクセルの位置に配置するカスタムのトラックカラーのビデオスクラバーを含むビデオビューアを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

navigationパラメーターを使用してビデオチャプター機能を有効にした場合、チャプターの位置は、ビデオスクラバートラックの上にマーカーとして表示されます。

ビデオチャプターマーカーは、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7navigation

ビデオチャプターマーカーのCSSプロパティ

width

ビデオチャプターマーカーの幅。

height

ビデオチャプターマーカーの高さ。

background-image

ビデオチャプターマーカーのアートワーク。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

このボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。 特に、selected='default'は初期設定のビデオチャプターマーカーの状態に対応し、selected='over'は、マウスを合わせたときやタッチジェスチャがビデオチャプターマーカーをアクティブにしたときに使用されます。

- 5 x 8ピクセルで、「default」状態と「over」状態で異なるアートを使用するビデオチャプターマーカーを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] { 
background-image: url("images/v2/VideoScrubberDiamond_over.png"); 
}

ビデオチャプター吹き出しは、ビデオチャプターマーカーの上に配置され、特定のチャプターのタイトル、開始時間および説明を表示します。 吹き出しの幅の最大値と、ビデオスクラバートラックに対する垂直方向のオフセットを制御できます。 残りの値はコンポーネントによって自動的に計算されます。

ビデオチャプター吹き出しは、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter

ビデオチャプター吹き出しのCSSプロパティ

max-width

ビデオチャプター吹き出しの最大幅。

ビデオスクラバートラックからの垂直方向のオフセット。

— 幅が235ピクセルで、ビデオスクラバートラックの下端から上に8ピクセルのビデオチャプター吹き出しを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

ビデオチャプター吹き出しは、オプションのヘッダーとコンテンツで構成されます。 ヘッダーには、オプションのチャプター開始時間とチャプタータイトルが含まれます。

ヘッダーは、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

ビデオチャプター吹き出しヘッダーのCSSプロパティ

height

ビデオチャプター吹き出しのヘッダーの高さ。

パディング

ビデオチャプター吹き出しのヘッダーテキストの内側のパディング。

background-color

ビデオチャプター吹き出しのヘッダーの背景色。

line-height

ビデオチャプター吹き出しのヘッダーテキストの線の高さ。

— 高さが22ピクセル、線の高さが22ピクセル、水平方向のマージンが12ピクセル、背景色がグレーのビデオチャプター吹き出しのヘッダーを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

ビデオチャプターの開始時間は、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

ビデオチャプター開始時間のCSSプロパティ

color

テキストカラー

font-重み付け

フォント重み付け

font-size

フォントサイズ

font-family

フォントファミリ。

padding-right

開始時間とチャプタータイトルのパディング。

— グレーの10ピクセルのVerdanaフォントを使用し、右側に10ピクセルのパディングがあるチャプター開始時間を設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

ビデオチャプタータイトルは、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

ビデオチャプタータイトルのCSSプロパティ

color

ビデオチャプタータイトルのテキストカラー。

font-重み付け

ビデオチャプタータイトルのフォント重み付け。

font-size

ビデオチャプタータイトルのフォントサイズ。

font-family

ビデオチャプタータイトルのフォントファミリ。

— 白、太字、10ピクセルのVerdanaフォントを使用するビデオチャプタータイトルを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

ビデオチャプター説明は、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

ビデオチャプター説明のCSSプロパティ

color

ビデオチャプター説明のテキストカラー。

background-color

ビデオチャプター説明の背景色。

font-重み付け

ビデオチャプター説明のフォント重み付け。

font-size

ビデオチャプター説明のフォントサイズ。

font-family

ビデオチャプター説明のフォントファミリ。

line-height

ビデオチャプター説明の行の高さ。

パディング

ビデオチャプター説明の内側のパディング。

— 濃いグレー、11ピクセルのVerdanaフォントを使用し、背景色が明るいグレーのビデオチャプター説明を設定するには、次のように記述します。5ピクセルの線の高さ、12ピクセルの水平パディング、12ピクセルの上パディング、9ピクセルの下パディング。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description { 
color: #333333; 
background-color: rgba(221, 221, 221, 0.9); 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 11px; 
line-height: 15px; 
padding: 12px 12px 9px; 
}

チャプター吹き出しの下部にあるウェッジコネクタは、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

ウェッジコネクタのCSSプロパティ

border-color

ウェッジコネクタの色。

<color> transparent と定義して、上の境界線の色のみを定義し、残りの境界線は透明のままにするようにします。

border-width

ウェッジコネクタの幅。

<width> <width> 0 と定義して、上と横の境界線に対してのみ同じ幅を定義し、下の境界線の幅は 0 となるようにします。

margin

下部の負の値のマージンのみを定義します。 border-width と同じ値にする必要があります。

— グレーの6ピクセルのウェッジコネクタを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}

このページ