Volume mutável

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:

.s7video360viewer .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:

.s7video360viewer .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 .

OBSERVAÇÃO

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:

.s7video360viewer .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:

.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track 
.s7video360viewer .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:

.s7video360viewer .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.

Exemplos : para configurar um botão Sem áudio de 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.

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

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

Nesta página