ビデオスクラバ

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

また、ビデオの再生中にスクラバー「ノブ」が移動し、再生中のビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体になります。 ビデオスクラバにスキンを適用し、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;
}