가변 볼륨 컨트롤은 처음에 사용자가 비디오 플레이어 사운드를 음소거하거나 음소거를 해제할 수 있는 단추로 나타납니다.
사용자가 버튼을 롤오버하면 사용자가 볼륨을 설정할 수 있는 슬라이더가 나타납니다. 가변 볼륨 컨트롤은 CSS별로 크기를 지정하고, 스킨을 지정하고, 해당 컨트롤을 포함하는 컨트롤 막대를 기준으로 위치를 지정할 수 있습니다.
가변 볼륨 영역의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7videoviewer .s7mutablevolume
변경 가능한 볼륨의 CSS 속성
최상위 |
패딩을 포함하여 위쪽 테두리에서 위치. |
오른쪽 |
패딩을 포함하여 오른쪽 테두리에서 위치. |
width |
가변 볼륨 컨트롤의 폭입니다. |
height |
가변 볼륨 컨트롤의 높이입니다. |
background-color |
변경 가능한 볼륨 컨트롤의 색상입니다. |
음소거/음소거 해제 단추 모양은 다음 CSS 클래스 선택기를 사용하여 제어합니다.
.s7videoviewer .s7mutablevolume .s7mutebutton
각 단추 상태에 대한 배경 이미지를 제어할 수 있습니다. 단추의 크기는 볼륨 컨트롤의 크기에서 상속됩니다.
버튼 이미지의 CSS 속성
background-image |
지정된 버튼 상태에 대해 표시되는 이미지입니다. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 다음을 참조하십시오 CSS 스프라이트 . |
이 버튼은 state
및 selected
속성 선택기 : 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. 특히, selected='true'
은 “음소거” 상태에 해당하며 selected='false'
은 “음소거 해제” 상태에 해당합니다.
세로 볼륨 막대 영역은 다음 CSS 클래스 선택기로 제어합니다.
.s7videoviewer .s7mutablevolume .s7verticalvolume
세로 볼륨 막대 영역의 CSS 속성
background-color |
세로 볼륨의 배경색입니다. |
width |
세로 볼륨의 폭입니다. |
height |
세로 볼륨의 높이입니다. |
수직 볼륨 컨트롤 내부의 트랙은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
수직 볼륨 컨트롤의 CSS 속성
background-color |
세로 볼륨 컨트롤의 배경색입니다. |
width |
세로 볼륨 컨트롤의 폭입니다. |
height |
세로 볼륨 컨트롤의 높이입니다. |
수직 볼륨 노브는 다음 CSS 클래스 선택기로 제어됩니다.
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob
세로 볼륨 컨트롤 노브의 CSS 속성
background-image |
세로 볼륨 조절 손잡이 아트워크. |
background-position |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다. 다음을 참조하십시오 CSS 스프라이트 . |
width |
세로 볼륨 조절 손잡이의 폭. |
height |
세로 볼륨 조절 손잡이의 높이입니다. |
왼쪽 |
세로 볼륨 조절 손잡이의 가로 위치. |
단추 도구 설명을 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
위쪽에서 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
구성 요소. 그러면 동일한 구성 요소가 비활성화되므로 최종 사용자는 해당 구성 요소를 사용할 수 없습니다.