ビデオスクラバ

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

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

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

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

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

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

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

トラックの CSS プロパティ

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

.s7video360viewer .s7videoscrubber .s7knob

ノブの CSS プロパティ

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

.s7video360viewer .s7videoscrubber .s7videotime

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

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

例 — 高さが 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;
}