ビデオスクラバー video-scrubber

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

また、ビデオの再生中にスクラバーの「ノブ」が動き、再生中にビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体を取ります。 ビデオスクラバをスキン付けし、CSSを使用して高さと垂直方向の位置を変更できます。

ビデオスクラバの一般的な外観は、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob

ビデオスクラバのCSSプロパティ

トップ
パディングを含む上の境界線からの位置。
パディングを含む下の境界線からの位置。
height
ビデオスクラバーの高さ。
background-color
ビデオスクラバーのカラー。

以下のCSSクラスセレクターは、背景、再生および読み込みのインジケーターを追跡します。

.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

トラックのCSSプロパティ

height
対応するトラックの高さ。
background-color
対応するトラックのカラー。

以下に示すCSSクラスセレクターで、ノブを制御します。

.s7interactivevideoviewer .s7videoscrubber .s7knob

ノブのCSSプロパティ

トップ
ノブの垂直方向のオフセット。
width
ノブの幅。
height
ノブの高さ。
background-image
ノブのアートワーク。
background-position

CSSスプライトを使用する場合の、アートワークスプライト内の位置。

CSSスプライトを参照してください。

以下に示すCSSクラスセレクターで、再生時間の吹き出しを制御します。

.s7interactivevideoviewer .s7videoscrubber .s7videotime

再生時間吹き出しのCSSプロパティ

font-family
時間表示テキストに使用するフォントファミリ。
font-size
時間表示テキストに使用するフォントサイズ。
color
時間表示テキストに使用するフォントカラー。
width
吹き出し領域の幅。
height
吹き出し領域の高さ
パディング
バブル領域のパディング。
background-image
バブルのアートワーク。
background-position

CSSスプライトを使用する場合の、アートワークスプライト内の位置。

CSSスプライトを参照してください。

text-align
吹き出し領域でのテキストの整列。

ビデオスクラバのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

— ビデオスクラバーを含み、高さが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プロパティ

width
ビデオチャプターマーカーの幅。
height
ビデオチャプターマーカーの高さ。
background-image
ビデオチャプターマーカーのアートワーク。
background-position

CSSスプライトを使用する場合の、アートワークスプライト内の位置。

CSSスプライトを参照してください。

NOTE
このボタンでは、 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プロパティ

max-width
ビデオチャプター吹き出しの最大幅。
ビデオスクラバトラックからの垂直方向のオフセット。

— 幅が235ピクセルで、ビデオスクラバートラックの下端から8ピクセル上にあるビデオチャプター吹き出しを設定するには、次のように記述します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}

ビデオチャプター吹き出しは、オプションのヘッダーとコンテンツで構成されます。 ヘッダーには、オプションのチャプター開始時間とチャプタータイトルが含まれます。

ヘッダーは、以下のCSSクラスセレクターを使用して制御します。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

ビデオチャプター吹き出しヘッダーのCSSプロパティ

height
ビデオチャプター吹き出しのヘッダーの高さ。
パディング
ビデオチャプター吹き出しのヘッダーテキストの内側のパディング。
background-color
ビデオチャプター吹き出しのヘッダーの背景色。
行の高さ
ビデオチャプター吹き出しのヘッダーのテキスト行の高さ。

— 高さが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プロパティ

color
テキストカラー
font-weight
フォントの太さ。
font-size
フォントサイズ
font-family
フォントファミリ。
padding-right
開始時間とチャプタータイトルの間のパディング。

— グレーの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プロパティ

color
ビデオチャプタータイトルのテキストカラー。
font-weight
ビデオチャプタータイトルのフォントの太さ。
font-size
ビデオチャプタータイトルのフォントサイズ。
font-family
ビデオチャプタータイトルのフォントファミリ。

— 白、太字、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プロパティ

color
ビデオチャプター説明のテキストカラー。
background-color
ビデオチャプター説明の背景色。
font-weight
ビデオチャプター説明のフォントの太さ。
font-size
ビデオチャプター説明のフォントサイズ。
font-family
ビデオチャプター説明のフォントファミリ。
行の高さ
ビデオチャプター説明の行の高さ。
パディング
ビデオチャプター説明の内側のパディング。

— ダークグレーの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プロパティ

border-color

ウェッジコネクタの色。

<color> transparent と定義され、上の境界線の色のみが定義され、残りの境界線は透明になります。

border-width

ウェッジコネクタの幅。

<width> <width> 0 として定義され、上と横の境界線に対してのみ同じ幅が定義され、下の境界線の幅は 0 になります。

margin
負の下余白のみを定義します。 border-width と同じ値にする必要があります。

— グレーの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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8