가변 볼륨

가변 볼륨 컨트롤은 처음에 사용자가 비디오 플레이어 사운드를 음소거하거나 음소거를 해제할 수 있는 단추로 나타납니다.

사용자가 버튼을 롤오버하면 사용자가 볼륨을 설정할 수 있는 슬라이더가 나타납니다. 가변 볼륨 컨트롤은 CSS별로 크기를 지정하고, 스킨을 지정하고, 해당 컨트롤을 포함하는 컨트롤 막대를 기준으로 위치를 지정할 수 있습니다.

가변 볼륨 영역의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7videoviewer .s7mutablevolume

변경 가능한 볼륨의 CSS 속성

음소거/음소거 해제 단추 모양은 다음 CSS 클래스 선택기를 사용하여 제어합니다.

.s7videoviewer .s7mutablevolume .s7mutebutton

각 단추 상태에 대한 배경 이미지를 제어할 수 있습니다. 단추의 크기는 볼륨 컨트롤의 크기에서 상속됩니다.

버튼 이미지의 CSS 속성

세로 볼륨 막대 영역은 다음 CSS 클래스 선택기로 제어합니다.

.s7videoviewer .s7mutablevolume .s7verticalvolume

세로 볼륨 막대 영역의 CSS 속성

수직 볼륨 컨트롤 내부의 트랙은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

수직 볼륨 컨트롤의 CSS 속성

수직 볼륨 노브는 다음 CSS 클래스 선택기로 제어됩니다.

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob

세로 볼륨 컨트롤 노브의 CSS 속성

단추 도구 설명을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.

예제

위쪽에서 6픽셀, 컨트롤 막대의 오른쪽 가장자리에서 38픽셀로 32x32픽셀 음소거 단추를 설정합니다. 선택하거나 선택하지 않을 때 4개의 서로 다른 단추 상태 각각에 대해 다른 이미지를 표시합니다.

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

다음은 가변 볼륨 컨트롤 내에서 볼륨 슬라이더를 스타일링하는 방법의 예입니다.

.s7videoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7videoviewer .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 구성 요소. 그러면 동일한 구성 요소가 비활성화되므로 최종 사용자는 해당 구성 요소를 사용할 수 없습니다.