可変ボリューム mutable-volume
ミュート可能ボリュームコントロールは、最初は、ユーザーがビデオプレーヤーのサウンドをミュートまたはミュート解除するボタンとして表示されます。
ユーザーがボタンの上にロールオーバーすると、スライダーが表示され、ボリュームを設定できます。 可変ボリュームコントロールは、CSS を使用して、そのコントロールバーに対するサイズ、スキン、位置を指定できます。
可変ボリューム領域の外観は、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7mutablevolume
可変ボリュームの CSS プロパティ
ミュート/ミュート解除ボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7mutablevolume .s7mutebutton
ボタンの状態ごとに背景画像を制御できます。 ボタンのサイズは、ボリュームコントロールのサイズから継承されます。
ボタン画像の CSS プロパティ
state
属性セレクターと selected
属性セレクターの両方がサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。 特に、 selected='true'
は「ミュート済み」の状態に対応し、 selected='false'
は「ミュートされていない」の状態に対応します。垂直ボリュームバー領域は、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7mutablevolume .s7verticalvolume
垂直ボリュームバー領域の CSS プロパティ
垂直ボリュームコントロール内のトラックは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack
垂直ボリュームコントロール内のトラックの CSS プロパティ
垂直ボリュームノブは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob
垂直ボリュームコントロールノブの CSS プロパティ
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 - 32 x 32 ピクセルで、コントロールバーの上から 6 ピクセル、右端から 38 ピクセルの位置に配置するミュートボタンを設定するには、次のように記述します。選択時または未選択時のボタンの 4 つの状態ごとに異なる画像を表示します。
.s7video360viewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
次の例は、ミュート可能ボリュームコントロール内のボリュームスライダのスタイルを設定する方法を示しています。
.s7video360viewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}