Volume variável

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

Quando um usuário passa o mouse sobre o botão, é exibido um controle deslizante que permite que o usuário defina o volume. O controle de volume mutável 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 CSS do volume mutável

top

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

right

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

width

A largura do controle de volume mutável.

altura

A altura do controle de volume mutável.

cor do fundo

A cor do controle de volume mutável.

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

.s7interactivevideoviewer .s7mutablevolume .s7mutebutton

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

Propriedades CSS da imagem do botão

imagem de fundo

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

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta os seletores de atributos state e selected, que podem ser usados para aplicar capas diferentes a estados de botão diferentes. Em particular, 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 CSS da área vertical da barra de volume

cor do 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 do 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 CSS do botão de controlo de volume vertical

imagem de fundo

Arte do botão de controle de volume vertical.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

largura

Largura do botão de controlo de volume vertical.

altura

Altura do botão de controlo de 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 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 6 pixels da parte superior e 38 pixels 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);
}

Este é um exemplo de como você pode criar o estilo do controle deslizante do volume no 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);
}

Nesta página