ビデオスクラバは、水平方向のスライダコントロールで、現在再生中のビデオ内の任意の時間位置を動的にシークできます。
また、ビデオの再生時にスクラバーの「ノブ」も移動し、再生中のビデオの現在時間位置を示します。 ビデオスクラバーは常に、コントロールバーの幅いっぱいに表示されます。 ビデオスクラバーのスキン設定が可能です。 CSSを使用して、高さと垂直方向の位置を変更します。
ビデオスクラバーの一般的な外観は、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob
ビデオスクラバーのCSSプロパティ
トップ |
パディングを含む上の境界線からの位置。 |
下 |
パディングを含む下の境界線からの位置。 |
height |
ビデオスクラバーの高さ。 |
background-color |
ビデオスクラバーのカラー。 |
以下に示すCSSクラスセレクターで、背景、再生、読み込みのインジケーターを追跡します。
.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed
トラックのCSSプロパティ
height |
対応するトラックの高さ。 |
background-color |
対応するトラックの色。 |
以下に示すCSSクラスセレクターで、ノブを制御します。
.s7videoviewer .s7videoscrubber .s7knob
ノブのCSSプロパティ
トップ |
ノブの垂直方向のオフセット。 |
width |
ノブの幅。 |
height |
ノブの高さ。 |
background-image |
ノブのアートワーク。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
以下に示すCSSクラスセレクターで、再生時間の吹き出しを制御します。
.s7videoviewer .s7videoscrubber .s7videotime
再生時間の吹き出しのCSSプロパティ
font-family |
時間表示テキストに使用するフォントファミリ。 |
font-size |
時間表示テキストに使用するフォントサイズ。 |
color |
時間表示テキストに使用するフォントカラー。 |
width |
吹き出し領域の幅。 |
height |
吹き出し領域の高さ。 |
パディング |
吹き出し領域のパディング。 |
background-image |
吹き出しのアートワーク。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
text-align |
吹き出し領域でのテキストの配置。 |
ビデオスクラバのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
例 — 高さが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プロパティ
width |
ビデオチャプターマーカーの幅。 |
height |
ビデオチャプターマーカーの高さ。 |
background-image |
ビデオチャプターマーカーのアートワーク。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
このボタンでは、state
属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。 特に、selected='default'
は初期設定のビデオチャプターマーカーの状態に対応し、selected='over'
は、マウスを合わせたときやタッチジェスチャがビデオチャプターマーカーをアクティブにしたときに使用されます。
例 - 5 x 8ピクセルで、「default」状態と「over」状態で異なるアートを使用するビデオチャプターマーカーを設定するには、次のように記述します。
.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プロパティ
max-width |
ビデオチャプター吹き出しの最大幅。 |
下 |
ビデオスクラバートラックからの垂直方向のオフセット。 |
例 — 幅が235ピクセルで、ビデオスクラバートラックの下端から上に8ピクセルのビデオチャプター吹き出しを設定するには、次のように記述します。
.s7videoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
ビデオチャプター吹き出しは、オプションのヘッダーとコンテンツで構成されます。 ヘッダーには、オプションのチャプター開始時間とチャプタータイトルが含まれます。
ヘッダーは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7videoscrubber .s7chapter .s7header
ビデオチャプター吹き出しヘッダーのCSSプロパティ
height |
ビデオチャプター吹き出しのヘッダーの高さ。 |
パディング |
ビデオチャプター吹き出しのヘッダーテキストの内側のパディング。 |
background-color |
ビデオチャプター吹き出しのヘッダーの背景色。 |
line-height |
ビデオチャプター吹き出しのヘッダーテキストの線の高さ。 |
例 — 高さが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プロパティ
color |
テキストカラー |
font-重み付け |
フォント重み付け |
font-size |
フォントサイズ |
font-family |
フォントファミリ。 |
padding-right |
開始時間とチャプタータイトルのパディング。 |
例 — グレーの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プロパティ
color |
ビデオチャプタータイトルのテキストカラー。 |
font-重み付け |
ビデオチャプタータイトルのフォント重み付け。 |
font-size |
ビデオチャプタータイトルのフォントサイズ。 |
font-family |
ビデオチャプタータイトルのフォントファミリ。 |
例 — 白、太字、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プロパティ
color |
ビデオチャプター説明のテキストカラー。 |
background-color |
ビデオチャプター説明の背景色。 |
font-重み付け |
ビデオチャプター説明のフォント重み付け。 |
font-size |
ビデオチャプター説明のフォントサイズ。 |
font-family |
ビデオチャプター説明のフォントファミリ。 |
line-height |
ビデオチャプター説明の行の高さ。 |
パディング |
ビデオチャプター説明の内側のパディング。 |
例 — 濃いグレー、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プロパティ
border-color |
ウェッジコネクタの色。 <color> transparent と定義して、上の境界線の色のみを定義し、残りの境界線は透明のままにするようにします。 |
border-width |
ウェッジコネクタの幅。 <width> <width> 0 と定義して、上と横の境界線に対してのみ同じ幅を定義し、下の境界線の幅は 0 となるようにします。 |
margin |
下部の負の値のマージンのみを定義します。 border-width と同じ値にする必要があります。 |
例 — グレーの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;
}