ミュート可能ボリューム

ミュート可能ボリュームコントロールは、最初はボタンとして表示され、ユーザがビデオプレーヤーの音をミュートまたはミュート解除できます。

ユーザーがボタンをロールオーバーすると、スライダーが表示され、ボリュームを設定できます。 ミュート可能ボリュームコントロールは、CSSを使用して、このコントロールを含むコントロールバーに対するサイズ、スキン、および位置を設定できます。

ミュート可能ボリューム領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume

ミュート可能ボリュームのCSSプロパティ

トップ

パディングを含む上の境界線からの位置。

パディングを含む右の境界線からの位置。

width

ミュート可能ボリュームコントロールの幅。

height

ミュート可能ボリュームコントロールの高さ。

background-color

ミュート可能ボリュームコントロールのカラー。

ミュート/ミュート解除ボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

ボタンの状態ごとに背景画像を制御できます。 ボタンのサイズは、ボリュームコントロールのサイズから継承されます。

ボタン画像のCSSプロパティ

background-image

ボタンの特定の状態に対して表示する画像。

background-position

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

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

メモ

このボタンでは、stateselectedの属性セレクターがサポートされます。これらのセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。 特に、selected='true'は「ミュート」状態に対応し、selected='false'は「ミュート解除」状態に対応します。

垂直ボリュームバー領域は、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

垂直ボリュームバー領域のCSSプロパティ

background-color

垂直ボリュームの背景色。

width

垂直ボリュームの幅。

height

垂直ボリュームの高さ。

垂直ボリュームコントロール内のトラックは、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直ボリュームコントロールのCSSプロパティ

background-color

垂直ボリュームコントロールの背景色。

width

垂直ボリュームコントロールの幅。

height

垂直ボリュームコントロールの高さ。

垂直ボリュームノブは、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

垂直ボリュームコントロールノブのCSSプロパティ

background-image

垂直ボリュームコントロールノブのアートワーク。

background-position

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

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

width

垂直ボリュームコントロールノブの幅。

height

垂直ボリュームコントロールノブの高さ。

垂直ボリュームコントロールノブの水平方向の位置。

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

32 x 32ピクセルで、コントロールバーの上から6ピクセル、右端から38ピクセルの位置に配置するミュートボタンを設定します。 選択時または未選択時のボタンの4つの状態ごとに異なる画像を表示します。

.s7mixedmediaviewer .s7mutablevolume { 
top:6px; 
right:38px; 
width:32px; 
height:32px; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] { 
background-image:url(images/mute_up.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] { 
background-image:url(images/mute_over.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] { 
background-image:url(images/mute_down.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] { 
background-image:url(images/mute_disabled.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] { 
background-image:url(images/unmute_up.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] { 
background-image:url(images/unmute_over.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] { 
background-image:url(images/unmute_down.png); 
} 
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] { 
background-image:url(images/unmute_disabled.png); 
}

ミュート可能ボリュームコントロール内のボリュームスライダのスタイル設定の例を以下に示します。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume { 
width:36px; 
height:83px; 
left:0px; 
background-color:#dddddd; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track { 
top:11px; 
left:14px; 
width:10px; 
height:63px; 
background-color:#666666; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack { 
width:10px; 
background-color:#ababab; 
} 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob { 
width:18px; 
height:10px; 
left:9px; 
background-image:url(images/volumeKnob.png); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now