Volumen silenciable mutable-volume
El control de volumen mutable aparece inicialmente como un botón que permite al usuario silenciar o reactivar el sonido del reproductor de vídeo.
Cuando un usuario pasa el ratón por encima del botón, aparece un control deslizante que permite al usuario definir el volumen. El control de volumen mutable puede cambiar de tamaño, aplicar aspecto y colocarse, 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:
.s7interactivevideoviewer .s7mutablevolume
Propiedades CSS del volumen mutable
El aspecto del botón silenciar/reactivar se controla con el siguiente selector de clase CSS:
.s7interactivevideoviewer .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
state y selected, que se pueden usar para aplicar diferentes aspectos a diferentes estados de botones. En particular, selected='true' corresponde al estado “silenciado” y selected='false' corresponde al estado “no silenciado”.El área vertical de la barra de volumen se controla con el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume
Propiedades CSS del área vertical de la barra de volumen
La pista dentro del control de volumen vertical se controla con los siguientes selectores de clase CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propiedades CSS de la pista dentro del control de volumen vertical
El control de volumen vertical se controla con el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob
Propiedades CSS del control de volumen vertical
La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.
Ejemplos section-e8caea0a303c425a8a637c2a47c06355
Configurar un botón de silencio de 32 x 32 píxeles situado a 6 píxeles de la parte superior y a 38 píxeles del borde derecho de la barra de control. Mostrar una imagen diferente para cada uno de los cuatro estados de botón diferentes cuando se selecciona o no.
.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);
}
A continuación se muestra un ejemplo de cómo aplicar estilo al control deslizante de volumen dentro del control de volumen modificable.
.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);
}