Volumen silenciable

Última actualización: 2023-05-23
  • Creado para:
  • Developer
    User

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 de recorte inteligente.

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:

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

Alto del control de volumen mutable.

background-color

Color del control de volumen mutable.

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

.s7smartcropvideoviewer .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 mostrada para un estado de botón determinado.

background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS .

NOTA

Este botón es compatible con el state y selected selectores de atributos, que se pueden utilizar para aplicar diferentes aspectos a diferentes estados de botones. En particular, selected='true' corresponde al estado “silenciado” y selected='false' corresponde al estado “sin silenciar”.

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

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume

Propiedades CSS del área vertical de la barra de volumen

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:

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

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob

Propiedades CSS del control de volumen vertical

background-image

Ilustración de control de volumen vertical.

background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS .

width

Anchura del control de volumen vertical.

height

Altura del control de volumen vertical.

izquierda

Posición horizontal del control de volumen vertical.

La información del 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

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.

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

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7smartcropvideoviewer .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, se desactiva el mismo componente para que el usuario final no pueda utilizarlo.

En esta página