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 por encima del botón, aparece un control deslizante que permite al usuario configurar el volumen. El control de volumen mutable se puede cambiar de tamaño, de aspecto 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:
.s7videoviewer .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:
.s7videoviewer .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
imagen de fondo |
La imagen mostrada para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite las dos variables state
y selected
selectores de atributos, que pueden utilizarse para aplicar diferentes aspectos a distintos estados de botones. En particular, selected='true'
corresponde al estado “silenciado” y selected='false'
corresponde al estado “unmuted”.
El área de la barra de volumen vertical se controla con el siguiente selector de clase CSS:
.s7videoviewer .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:
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .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 del volumen vertical se controla con el siguiente selector de clase CSS:
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob
Propiedades CSS del control de volumen vertical
imagen de fondo |
Ilustración del pomo de control de volumen vertical. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
width |
Anchura del pomo de control de volumen vertical. |
height |
Altura del pomo de control de volumen vertical. |
izquierda |
Posición horizontal del pomo de control de volumen vertical. |
La información del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
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.
.s7videoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7videoviewer .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 de volumen dentro del control de volumen mutable.
.s7videoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}
A continuación se muestra un ejemplo de cómo puede personalizar el reproductor de vídeo para que el sonido se desactive durante la reproducción. Agregue el siguiente código al código incrustado del visor:
"handlers":{
"initComplete":function() {
videoViewer.getComponent("mutableVolume").setPosition(0);
videoViewer.getComponent("mutableVolume").deactivate();
}
}
En el ejemplo de código anterior, el nivel de volumen se establece en 0
en el mutableVolume
componente. A continuación, el mismo componente se desactiva para que el usuario final no pueda utilizarlo.