ビデオスクラバ

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

また、ビデオの再生中にスクラバー「ノブ」が移動し、再生中のビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体になります。 ビデオスクラバにスキンを適用し、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 プロパティ

高さ

対応するトラックの高さ。

background-color

対応するトラックの色。

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

.s7videoviewer .s7videoscrubber .s7knob

ノブの CSS プロパティ

トップ

ノブの垂直方向のオフセット。

width

ノブの幅。

高さ

ノブの高さ。

background-image

ノブのアートワーク。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

詳しくは、 CSS スプライト .

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

.s7videoviewer .s7videoscrubber .s7videotime

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

font-family

時間表示テキストに使用するフォントファミリ。

font-size

時間表示テキストに使用するフォントサイズです。

color

時間表示テキストに使用するフォントカラー。

吹き出し領域の幅。

高さ

吹き出し領域の高さ。

パディング

吹き出し領域のパディング。

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 プロパティ

ビデオチャプターマーカーの幅。

高さ

ビデオチャプターマーカーの高さ。

background-image

ビデオチャプターマーカーのアートワーク。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

詳しくは、 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 プロパティ

max-width

ビデオチャプター吹き出しの最大幅。

ビデオスクラバートラックからの垂直方向のオフセット。

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

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

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

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

.s7videoviewer .s7videoscrubber .s7chapter .s7header

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

高さ

ビデオチャプター吹き出しのヘッダーの高さ。

パディング

ビデオチャプター吹き出しのヘッダーテキストの内側のパディング。

background-color

ビデオチャプター吹き出しのヘッダーの背景色。

行の高さ

ビデオチャプター吹き出しのヘッダーテキストの行の高さ。

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

カラー

テキストの色。

font-weight

フォントの太さ。

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 プロパティ

カラー

ビデオチャプタータイトルのテキストカラー。

font-weight

ビデオチャプタータイトルのフォントの太さ。

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 プロパティ

カラー

ビデオチャプター説明のテキストカラー。

background-color

ビデオチャプター説明の背景色。

font-weight

ビデオチャプター説明のフォントの太さ。

font-size

ビデオチャプター説明のフォントサイズ。

font-family

ビデオチャプター説明のフォントファミリ。

行の高さ

ビデオチャプター説明の行の高さ。

パディング

ビデオチャプター説明の内側のパディング。

— ダークグレーの 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> 透明 上の境界線の色のみを定義し、残りの境界線は透明になります。

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;
}

このページ