ビデオスクラバー 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;
}