ビデオスクラバー

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

また、ビデオの再生時にスクラバーの「ノブ」も移動し、再生中のビデオの現在時間位置を示します。 ビデオスクラバーは常に、コントロールバーの幅いっぱいに表示されます。 ビデオスクラバーのスキン設定が可能です。 CSSを使用して、高さと垂直方向の位置を変更します。

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

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

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

トップ

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

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

height

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

background-color

ビデオスクラバーのカラー。

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

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

トラックのCSSプロパティ

height

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

background-color

対応するトラックの色。

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

.s7video360viewer .s7videoscrubber .s7knob

ノブのCSSプロパティ

トップ

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

width

ノブの幅。

height

ノブの高さ。

background-image

ノブのアートワーク。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

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

.s7video360viewer .s7videoscrubber .s7videotime

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

font-family

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

font-size

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

color

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

width

吹き出し領域の幅。

height

吹き出し領域の高さ。

パディング

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

background-image

吹き出しのアートワーク。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

text-align

吹き出し領域でのテキストの配置。

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

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

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now