ビデオスクラバー video-scrubber
ビデオスクラバーは、現在再生中のビデオ内の任意の時間の位置を動的に探すことができる水平スライダーコントロールです。
スクラバー「ノブ」は、再生中にビデオの現在の時間位置を示すために、ビデオの再生に合わせて移動します。 ビデオスクラバーは常にコントロールバーの幅全体を取ります。 ビデオスクラバーをスキンし、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 プロパティ
state属性セレクターの両方をサポートしています。 特に、selected='default'はデフォルトのビデオチャプターマーカーの状態に対応し、selected='over'はマウスオーバーまたはタッチジェスチャーによってビデオチャプターマーカーがアクティブ化されたときに使用されます。例 - 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;
}