Volume mutável mutable-volume

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.

NOTE
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 section-e8caea0a303c425a8a637c2a47c06355

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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8