ビデオスクラバー video-scrubber

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

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

ビデオスクラバーの一般的な外観は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .s7videoscrubber .s7knob

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

上部のボーダーから配置(パディングを含む)。
下罫線からパディングを含めて移動します。
高さ
ビデオスクラバーの高さ。
の背景色の
ビデオスクラバーの色。

次の CSS クラスセレクターは、背景、再生、読み込みの指標を追跡します。

.s7smartcropvideoviewer .s7videoscrubber .s7track
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed

トラックの CSS プロパティ

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

次の CSS クラスセレクターでつまみを制御しています。

.s7smartcropvideoviewer .s7videoscrubber .s7knob

ノブの CSS プロパティ

垂直ノブ オフセット。
ノブの幅。
高さ
ノブの高さ。
background-image
ノブ アートワーク。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

次の CSS クラスセレクターは、タイムバブルを制御します。

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

バブルを再生した時間の CSS プロパティ

フォントファミリーの
時間表示テキストに使用するフォントファミリー。
font-size
時間表示テキストに使用するフォントサイズ。
color
時間表示テキストに使用するフォントカラー。
バブル領域の幅。
高さ
バブル領域の高さ。
padding
バブル領域のパディング。
background-image
バブルアートワーク。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

text-align
テキストとバブル領域の配置。

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

– 高さが 10 ピクセルのカスタムトラックカラーのビデオスクラバーでビデオビューアを設定するには 最後に、コントロールバーの上端と左端から 10 ピクセルと 35 ピクセルの位置を指定します。

.s7smartcropvideoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7smartcropvideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8