可変ボリューム mutable-volume

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

ユーザーがボタンの上にマウスポインターを置くと、ボリュームを設定できるスライダーが表示されます。 可変ボリュームコントロールは、CSS によって、そのコントロールを含むコントロールバーに対してサイズ、スキン、および位置を調整できます。

可変ボリューム領域の外観は、次の CSS クラスセレクターで制御します。

.s7video360viewer .s7mutablevolume

可変ボリュームの CSS プロパティ

上部のボーダーから配置(パディングを含む)。
right
パディングを含めて、右側のボーダーから配置します。
可変ボリュームコントロールの幅。
高さ
可変ボリュームコントロールの高さ。
の背景色の
可変ボリュームコントロールの色。

ミュート/ミュート解除ボタンの外観は、次の CSS クラスセレクターで制御されます。

.s7video360viewer .s7mutablevolume .s7mutebutton

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

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

background-image
特定のボタン状態に対して表示される画像。
background-position

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

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

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

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

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

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

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

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

- 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8