ビデオスクラバー

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

また、ビデオの再生中にスクラバーの「ノブ」が動き、再生中にビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体を取ります。 ビデオスクラバーのスキンを適用できます。 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ピクセルで、「デフォルト」と「オーバー」状態で異なるアートを使用するビデオチャプターマーカーを設定するには、次のように記述します。

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