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