ビデオスクラバー

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

また、ビデオの再生中にスクラバーの「ノブ」が動き、再生中にビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体を取ります。 ビデオスクラバーのスキンを適用できます。 CSSを使用して、高さと垂直方向の位置を変更します。

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

.s7mixedmediaviewer .s7videoscrubber 
.s7mixedmediaviewer .s7videoscrubber .s7videotime 
.s7mixedmediaviewer .s7videoscrubber .s7knob

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

トップ

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

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

height

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

background-color

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

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

.s7mixedmediaviewer .s7videoscrubber .s7track 
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded 
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed

トラックのCSSプロパティ

height

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

background-color

対応するトラックのカラー。

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

.s7mixedmediaviewer .s7videoscrubber .s7knob

ノブのCSSプロパティ

トップ

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

width

ノブの幅。

height

ノブの高さ。

background-image

ノブのアートワーク。

background-position

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

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

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

.s7mixedmediaviewer .s7videoscrubber .s7videotime

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

font-family

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

font-size

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

color

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

width

吹き出し領域の幅。

height

吹き出し領域の高さ

パディング

バブル領域のパディング。

background-image

バブルのアートワーク。

background-position

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

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

text-align

吹き出し領域でのテキストの整列。

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

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

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

このページ