ビデオスクラバ

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

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

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

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

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

トップ

パディングを含む上の境界線からの位置。

下

パディングを含む下の境界線からの位置。

height

ビデオスクラバーの高さ。

background-color

ビデオスクラバーの色。

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

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

トラックの CSS プロパティ

高さ

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

background-color

対応するトラックの色。

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

.s7smartcropvideoviewer .s7videoscrubber .s7knob

ノブの CSS プロパティ

トップ

ノブの垂直方向のオフセット。

width

ノブの幅。

高さ

ノブの高さ。

background-image

ノブのアートワーク。

background-position

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

詳しくは、 CSS スプライト .

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

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

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

font-family

時間表示テキストに使用するフォントファミリ。

font-size

時間表示テキストに使用するフォントサイズです。

color

時間表示テキストに使用するフォントカラー。

幅

吹き出し領域の幅。

高さ

吹き出し領域の高さ。

パディング

吹き出し領域のパディング。

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;
}

このページ