O controle de volume silencioso é exibido inicialmente como um botão que permite ao usuário silenciar ou ativar o som do player de vídeo.
Quando um usuário passa o mouse sobre o botão, um controle deslizante é exibido, permitindo que o usuário defina o volume. O controle de volume silencioso pode ser dimensionado, esfolado e posicionado, em relação à barra de controle que o contém, por CSS.
A aparência da área de volume mutável é controlada com o seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7mutablevolume
Propriedades de CSS do volume mutável
top |
Posição a partir da borda superior, incluindo preenchimento. |
right |
Posição a partir da borda direita, incluindo preenchimento. |
width |
A largura do controle de volume mutável. |
altura |
A altura do controle de volume mutável. |
cor de fundo |
A cor do controle de volume mutável. |
A aparência do botão silenciar/ativar é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton
É possível controlar a imagem de plano de fundo para cada estado de botão. O tamanho do botão é herdado do tamanho do controle de volume.
Propriedades de CSS da imagem do botão
background-image |
A imagem exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites . |
Este botão suporta os seletores de atributos state
e selected
, que podem ser usados para aplicar diferentes capas a diferentes estados de botão. Especificamente, selected='true'
corresponde ao estado “muted” e selected='false'
corresponde ao estado “unmuted”.
A área da barra de volume vertical é controlada com o seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume
Propriedades de CSS da área da barra de volume vertical
cor de fundo |
A cor de fundo do volume vertical. |
largura |
A largura do volume vertical. |
altura |
A altura do volume vertical. |
A faixa dentro do controle de volume vertical é controlada com os seguintes seletores de classe CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriedades CSS da faixa dentro do controle de volume vertical
cor de fundo |
A cor de fundo do controle de volume vertical. |
largura |
Largura do controle de volume vertical. |
altura |
Altura do controle de volume vertical. |
O botão de volume vertical é controlado com o seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob
Propriedades de CSS do botão de controle de volume vertical
background-image |
Arte-final do botão de controle de volume vertical. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites . |
largura |
Largura do botão de controle de volume vertical. |
altura |
Altura do botão de controlo do volume vertical. |
left |
Posição horizontal do botão de controlo de volume vertical. |
A dica de ferramenta do botão pode ser localizada. Consulte Localização de elementos da interface do usuário para obter mais informações.
Para configurar um botão silencioso com 32 x 32 pixels e posicionado 6 pixels a partir da parte superior e 38 pixels a partir da borda direita da barra de controle. Exiba uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não selecionado.
.s7interactivevideoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
A seguir está um exemplo de como você pode estilizar o controle deslizante de volume dentro do controle de volume mutável.
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}