ビデオスクラバー video-scrubber

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

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

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

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

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

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

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

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

トラックの CSS プロパティ

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

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

.s7mixedmediaviewer .s7videoscrubber .s7knob

ノブの CSS プロパティ

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

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

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

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

.s7mixedmediaviewer .s7videoscrubber .s7videotime

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

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

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

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

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

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

section-e8caea0a303c425a8a637c2a47c06355

ビデオスクラバーがコントロールバーの上端と左端から 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8