ビデオスクラバー

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

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

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

.s7videoviewer .s7videoscrubber 
.s7videoviewer .s7videoscrubber .s7videotime 
.s7videoviewer .s7videoscrubber .s7knob

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

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

.s7videoviewer .s7videoscrubber .s7track 
.s7videoviewer .s7videoscrubber .s7trackloaded 
.s7videoviewer .s7videoscrubber .s7trackplayed

トラックのCSSプロパティ

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

.s7videoviewer .s7videoscrubber .s7knob

ノブのCSSプロパティ

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

.s7videoviewer .s7videoscrubber .s7videotime

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

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

例 — 高さが10ピクセルで、コントロールバーの上および左端から10ピクセル、35ピクセルの位置に配置するカスタムのトラックカラーのビデオスクラバーを含むビデオビューアを設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7videoviewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7videoviewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7videoviewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

navigationパラメーターを使用してビデオチャプター機能を有効にした場合、チャプターの位置は、ビデオスクラバートラックの上にマーカーとして表示されます。

ビデオチャプターマーカーは、以下のCSSクラスセレクターを使用して制御します。

 .s7videoviewer .s7videoscrubber .s7navigation

ビデオチャプターマーカーのCSSプロパティ

例 - 5 x 8ピクセルで、「default」状態と「over」状態で異なるアートを使用するビデオチャプターマーカーを設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7videoviewer .s7videoscrubber .s7navigation[state="over"] { 
background-image: url("images/v2/VideoScrubberDiamond_over.png"); 
}

ビデオチャプター吹き出しは、ビデオチャプターマーカーの上に配置され、特定のチャプターのタイトル、開始時間および説明を表示します。 吹き出しの幅の最大値と、ビデオスクラバートラックに対する垂直方向のオフセットを制御できます。 残りの値はコンポーネントによって自動的に計算されます。

ビデオチャプター吹き出しは、以下のCSSクラスセレクターを使用して制御します。

.s7videoviewer .s7videoscrubber .s7chapter

ビデオチャプター吹き出しのCSSプロパティ

例 — 幅が235ピクセルで、ビデオスクラバートラックの下端から上に8ピクセルのビデオチャプター吹き出しを設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

ビデオチャプター吹き出しは、オプションのヘッダーとコンテンツで構成されます。 ヘッダーには、オプションのチャプター開始時間とチャプタータイトルが含まれます。

ヘッダーは、以下のCSSクラスセレクターを使用して制御します。

.s7videoviewer .s7videoscrubber .s7chapter .s7header

ビデオチャプター吹き出しヘッダーのCSSプロパティ

例 — 高さが22ピクセル、線の高さが22ピクセル、水平方向のマージンが12ピクセル、背景色がグレーのビデオチャプター吹き出しのヘッダーを設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

ビデオチャプターの開始時間は、以下のCSSクラスセレクターを使用して制御します。

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

ビデオチャプター開始時間のCSSプロパティ

例 — グレーの10ピクセルのVerdanaフォントを使用し、右側に10ピクセルのパディングがあるチャプター開始時間を設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

ビデオチャプタータイトルは、以下のCSSクラスセレクターを使用して制御します。

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

ビデオチャプタータイトルのCSSプロパティ

例 — 白、太字、10ピクセルのVerdanaフォントを使用するビデオチャプタータイトルを設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

ビデオチャプター説明は、以下のCSSクラスセレクターを使用して制御します。

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

ビデオチャプター説明のCSSプロパティ

例 — 濃いグレー、11ピクセルのVerdanaフォントを使用し、背景色が明るいグレーのビデオチャプター説明を設定するには、次のように記述します。5ピクセルの線の高さ、12ピクセルの水平パディング、12ピクセルの上パディング、9ピクセルの下パディング。

.s7videoviewer .s7videoscrubber .s7chapter .s7description { 
color: #333333; 
background-color: rgba(221, 221, 221, 0.9); 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 11px; 
line-height: 15px; 
padding: 12px 12px 9px; 
}

チャプター吹き出しの下部にあるウェッジコネクタは、以下のCSSクラスセレクターを使用して制御します。

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

ウェッジコネクタのCSSプロパティ

例 — グレーの6ピクセルのウェッジコネクタを設定するには、次のように記述します。

.s7videoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}