ビデオスクラバー video-scrubber
ビデオスクラバは、水平スライダーコントロールで、ユーザーが現在再生中のビデオ内の任意の時間位置を動的に探すことができます。
また、ビデオの再生中にスクラバーの「ノブ」が動き、再生中にビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体を取ります。 ビデオスクラバをスキン付けし、CSSを使用して高さと垂直方向の位置を変更できます。
ビデオスクラバの一般的な外観は、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
ビデオスクラバのCSSプロパティ
以下のCSSクラスセレクターは、背景、再生および読み込みのインジケーターを追跡します。
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
トラックのCSSプロパティ
以下に示すCSSクラスセレクターで、ノブを制御します。
.s7interactivevideoviewer .s7videoscrubber .s7knob
ノブのCSSプロパティ
以下に示すCSSクラスセレクターで、再生時間の吹き出しを制御します。
.s7interactivevideoviewer .s7videoscrubber .s7videotime
再生時間吹き出しのCSSプロパティ
ビデオスクラバのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 — ビデオスクラバーを含み、高さが10ピクセルのカスタムのトラックカラーを持つビデオビューアを設定するには、次のように記述します。コントロールバーの上端と左端から10ピクセル、左端から35ピクセルの位置に配置します。
.s7interactivevideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
navigation
パラメーターでビデオチャプターマーカーを有効にすると、チャプターの位置がビデオスクラバートラックの上にマーカーとして表示されます。
ビデオチャプターマーカーは、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7navigation
ビデオチャプターマーカーのCSSプロパティ
state
属性セレクターがサポートされます。このセレクターを使用して、ボタンの状態ごとに異なるスキンを適用できます。 特に、 selected='default'
はデフォルトのビデオチャプターマーカーの状態に対応し、 selected='over'
は、マウスを置くかタッチジェスチャによってビデオチャプターマーカーがアクティブになったときに使用されます。例 - 5 x 8ピクセルで、「デフォルト」と「オーバー」状態で異なるアートを使用するビデオチャプターマーカーを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
ビデオチャプター吹き出しは、ビデオチャプターマーカーの上に配置され、特定のチャプターのタイトル、開始時間および説明を表示します。 吹き出しの幅の最大値と、ビデオスクラバートラックに対する垂直方向のオフセットを制御できます。 残りの部分は、コンポーネントによって自動的に計算されます。
ビデオチャプター吹き出しは、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter
ビデオチャプター吹き出しのCSSプロパティ
例 — 幅が235ピクセルで、ビデオスクラバートラックの下端から8ピクセル上にあるビデオチャプター吹き出しを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
ビデオチャプター吹き出しは、オプションのヘッダーとコンテンツで構成されます。 ヘッダーには、オプションのチャプター開始時間とチャプタータイトルが含まれます。
ヘッダーは、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
ビデオチャプター吹き出しヘッダーのCSSプロパティ
例 — 高さが22ピクセル、線の高さが22ピクセル、水平方向のマージンが12ピクセル、背景がグレーのビデオチャプター吹き出しのヘッダーを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
ビデオチャプターの開始時間は、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
ビデオチャプターの開始時間のCSSプロパティ
例 — グレーの10ピクセルのVerdanaフォントを使用し、右側に10ピクセルのパディングがあるチャプター開始時間を設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
ビデオチャプタータイトルは、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
ビデオチャプタータイトルのCSSプロパティ
例 — 白、太字、10ピクセルのVerdanaフォントを使用するビデオチャプタータイトルを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
ビデオチャプターの説明は、以下のCSSクラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
ビデオチャプター説明のCSSプロパティ
例 — ダークグレーの11ピクセルのVerdanaフォントを使用し、ライトグレーの背景にビデオチャプターの説明を設定するには、次のように記述します。5ピクセルの線の高さ、12ピクセルの水平パディング、12ピクセルの上パディング、9ピクセルの下パディング。
.s7interactivevideoviewer .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クラスセレクターを使用して制御します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
ウェッジコネクタのCSSプロパティ
例 — グレーの6ピクセルのウェッジコネクタを設定するには、次のように記述します。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}