Volume mutável

O controle de volume mutável aparece inicialmente como um botão que permite ao usuário ativar ou desativar o som do player de vídeo.

Quando um usuário passa o botão sobre ele, é exibido um controle deslizante que permite a ele definir o volume. O controle de volume mutável pode ser dimensionado, esfolado e posicionado, de acordo com a barra de controle que o contém, pelo CSS.

A aparência da área de volume mutável é controlada com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7mutablevolume

Propriedades CSS do volume mutável

top

Posição a partir da borda superior, incluindo o preenchimento.

direita

Posição a partir da borda direita, incluindo o preenchimento.

largura

A largura do controle de volume mutável.

altura

A altura do controle de volume mutável.

background-color

A cor do controle de volume mutável.

A aparência do botão Mudo/Ativar mudo é controlada com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

Você pode controlar a imagem de fundo para cada estado do botão. O tamanho do botão é herdado do tamanho do controle de volume.

Propriedades CSS da imagem do botão

background-image

A imagem exibida para um determinado estado de botão.

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta as opções state e selected seletores de atributo, que podem ser usados para aplicar capas diferentes a estados de botão diferentes. Em especial, selected='true' corresponde ao estado “mudo” e selected='false' corresponde ao estado “sem áudio”.

A área da barra de volume vertical é controlada com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

Propriedades CSS da área da barra de volume vertical

background-color

A cor do plano 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:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

Propriedades CSS do controle de volume vertical

background-color

A cor do plano 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:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

Propriedades CSS do botão de controle de volume vertical

background-image

Trabalho artístico do botão de controle de volume vertical.

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS .

largura

Largura do botão de controle de volume vertical.

altura

Altura do botão de controle de volume vertical.

left

Posição horizontal do controle de volume vertical.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplos

Para configurar um botão Mudo com 32 x 32 pixels e posicionado a 6 pixels da parte superior e a 38 pixels da borda direita da barra de controle. Exibir uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não selecionado.

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

Este é um exemplo de como você pode estilizar o controle deslizante de volume dentro do controle de volume mutável.

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}

Nesta página