ビデオスクラバ video-scrubber
ビデオスクラバは、水平方向のスライダコントロールで、現在再生中のビデオ内の任意の時間位置をユーザーが動的に探すことができます。
ビデオの再生中にスクラバーの「ノブ」も移動し、再生中のビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体を取ります。 ビデオスクラバのスキンを適用できます。 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8