ビデオスクラバは、水平方向のスライダコントロールで、現在再生中のビデオ内の任意の時間位置を動的にシークできます。
また、ビデオの再生時にスクラバーの「ノブ」も移動し、再生中のビデオの現在時間位置を示します。 ビデオスクラバーは常に、コントロールバーの幅いっぱいに表示されます。 ビデオスクラバーのスキン設定が可能です。 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;
}