可変ボリューム 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);
}