ビデオスクラバー

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

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

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

.s7video360viewer .s7videoscrubber 
.s7video360viewer .s7videoscrubber .s7videotime 
.s7video360viewer .s7videoscrubber .s7knob

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

トップ	パディングを含む上の境界線からの位置。
下	パディングを含む下の境界線からの位置。
height	ビデオスクラバーの高さ。
background-color	ビデオスクラバーのカラー。

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

.s7video360viewer .s7videoscrubber .s7track 
.s7video360viewer .s7videoscrubber .s7trackloaded 
.s7video360viewer .s7videoscrubber .s7trackplayed

トラックのCSSプロパティ

height	対応するトラックの高さ。
background-color	対応するトラックの色。

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

.s7video360viewer .s7videoscrubber .s7knob

ノブのCSSプロパティ

トップ	ノブの垂直方向のオフセット。
width	ノブの幅。
height	ノブの高さ。
background-image	ノブのアートワーク。
background-position	CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。

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

.s7video360viewer .s7videoscrubber .s7videotime

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

font-family	時間表示テキストに使用するフォントファミリ。
font-size	時間表示テキストに使用するフォントサイズ。
color	時間表示テキストに使用するフォントカラー。
width	吹き出し領域の幅。
height	吹き出し領域の高さ。
パディング	吹き出し領域のパディング。
background-image	吹き出しのアートワーク。
background-position	CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。
text-align	吹き出し領域でのテキストの配置。

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

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

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