Volumen mutable

El control de volumen mutable aparece inicialmente como un botón que permite al usuario silenciar o anular el silencio del sonido del reproductor de vídeo.

Cuando un usuario pasa el ratón sobre el botón, aparece un deslizador que permite al usuario configurar el volumen. El control de volumen mutable se puede cambiar de tamaño, de piel y de posición, en relación con la barra de control que lo contiene, mediante CSS.

El aspecto del área de volumen mutable se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7mutablevolume

Propiedades CSS del volumen mutable

parte superior

Posición desde el borde superior, incluido el relleno.

derecha

Posición desde el borde derecho, incluido el relleno.

width

Ancho del control de volumen mutable.

height

Altura del control de volumen mutable.

background-color

Color del control de volumen mutable.

El aspecto del botón silenciar/anular el silencio se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

Puede controlar la imagen de fondo para cada estado del botón. El tamaño del botón se hereda del tamaño del control de volumen.

Propiedades CSS de la imagen del botón

background-image

Imagen que se muestra para un estado de botón determinado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

NOTA

Este botón admite los selectores de atributos state y selected, que pueden utilizarse para aplicar diferentes apariencias a diferentes estados de botón. En particular, selected='true' corresponde al estado “silenciado” y selected='false' corresponde al estado “no silenciado”.

El área de la barra de volumen vertical se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

Propiedades CSS del área de la barra de volumen vertical

background-color

Color de fondo del volumen vertical.

width

Ancho del volumen vertical.

height

Altura del volumen vertical.

La pista dentro del control de volumen vertical se controla con los siguientes selectores de clase CSS:

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

Propiedades CSS del control de volumen vertical

background-color

Color de fondo del control de volumen vertical.

width

Ancho del control de volumen vertical.

height

Altura del control de volumen vertical.

El control de volumen vertical se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

Propiedades CSS del control de volumen vertical

background-image

Ilustración del pomo de control de volumen vertical.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

width

Ancho del pomo de control vertical del volumen.

height

Altura del pomo de control de volumen vertical.

izquierda

Posición horizontal del pomo de control vertical del volumen.

La información de objeto del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplos

Para configurar un botón de silencio de 32 x 32 píxeles y posicionado 6 píxeles desde la parte superior y 38 píxeles desde el borde derecho de la barra de control. Muestre una imagen diferente para cada uno de los cuatro estados de botón diferentes cuando esté seleccionado o no.

.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); 
}

A continuación se muestra un ejemplo de cómo puede aplicar estilo al control deslizante del volumen dentro del control de volumen mutable.

.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); 
}

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free