Muestras interactivas

El panel Muestras interactivas aparece junto al contenido del vídeo si se han pasado datos interactivos al visor en la configuración. Consiste en un banner en la parte superior que representa texto como "Haga clic para ver", una columna de uno o más muestras interactivas y dos botones de desplazamiento (disponibles solo en sistemas de escritorio).

En sistemas de escritorio y en dispositivos táctiles, en orientación horizontal, los muestras interactivas se representan verticalmente a la derecha del contenido de vídeo. En dispositivos táctiles en orientación vertical, aparecen en la parte inferior del visor como una fila horizontal de muestras.

El selector de clase CSS siguiente controla la ubicación y la orientación del panel de muestras interactivo:

.s7interactivevideoviewer .s7interactiveswatches

Propiedades CSS de las muestras interactivas

La ubicación y orientación en tiempo de ejecución del panel de muestras interactivas se definen mediante una combinación de las propiedades CSS anteriores de la siguiente manera:

• Para representar muestras interactivas horizontalmente en la parte inferior del visor, establezca la altura en un valor de píxel absoluto; izquierda y abajo a 0px; ancho, derecho y superior a automático.
• Para procesar muestras interactivas verticalmente a la derecha del contenido de vídeo, defina la anchura en un píxel absoluto; derecha y arriba a 0px; altura, izquierda e inferior para auto.

Es posible utilizar marcadores CSS con este estilo para lograr la colocación adaptativa del panel de muestras interactivo.

Ejemplo

Configuración de un panel de muestras interactivo para representarlo horizontalmente en la parte inferior del visor en dispositivos táctiles en orientación horizontal. Y, para mostrarlo verticalmente a la derecha del contenido del vídeo en todos los demás casos:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches, 
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches { 
 width:120px; 
 height:auto; 
 right:0px; 
 top:0px; 
 left:auto; 
 bottom:auto; 
} 
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches { 
 width:auto; 
 height:136px; 
 right:auto; 
 top:auto; 
 left:0px; 
 bottom:0px; 
}

El tamaño y la posición del banner lo gestiona el componente de muestras interactivas basado en otro estilo aplicado con CSS y no se puede establecer explícitamente.

El siguiente selector de clase CSS controla el aspecto del panel del banner:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Propiedades CSS del panel del banner

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

Ejemplo

Para configurar un banner con fondo gris oscuro, borde más claro de dos píxeles y el texto blanco centrado horizontalmente:

.s7interactivevideoviewer .s7interactiveswatches .s7banner { 
    background-color: #222222; 
    border-bottom: 2px solid #444444; 
    color: #ffffff; 
    text-align: center; 
}

El siguiente selector de clase CSS controla el aspecto de las muestras:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

Propiedades CSS del área de muestras

Ejemplo

Para configurar el área de muestras con fondo gris oscuro:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

El siguiente selector de clase CSS controla el espaciado entre miniaturas de muestra:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propiedades CSS del espaciado de las miniaturas de las muestras

Ejemplo

Para configurar el espaciado vertical para que sea de diez píxeles:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

El siguiente selector de clase CSS controla el aspecto de las miniaturas individuales:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

Propiedades CSS del aspecto de miniaturas individuales

Ejemplo

Para configurar miniaturas de 100 x 75 píxeles:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb { 
 width:100px; 
 height:75px; 
}

El selector de clase CSS siguiente controla el aspecto de la etiqueta de miniatura:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

Propiedades CSS del aspecto de la etiqueta de miniatura

Ejemplo

Para configurar etiquetas para utilizar alineadas a la izquierda, blancas, 12 píxeles, en la fuente Helvetica® y un borde inferior:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label { 
 border-bottom: 1px solid #e9e9e9; 
 text-align: left; 
color: #ffffff; 
font-family: Helvetica,sans-serif; 
font-size: 12px; 
}

El selector de clase CSS siguiente controla el aspecto de los botones de desplazamiento hacia arriba y hacia abajo:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

No es posible colocar los botones de desplazamiento utilizando las propiedades CSS top, left, bottom y right; en su lugar, la lógica del visor los coloca automáticamente.

Propiedades CSS del aspecto de los botones de desplazamiento hacia arriba y hacia abajo

La información sobre herramientas de botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo

Para configurar el botón de desplazamiento hacia arriba que sea de 60 x 36 píxeles, tenga distintas ilustraciones para cada estado y tome esa ilustración de la imagen Sprite del componente:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton { 
 background-size: 120px; 
 width: 60px; 
 height: 36px;  
} 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] { 
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png); 
} 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }