Muestras interactivas

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

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

El siguiente selector de clase CSS 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 interactivo se define mediante una combinación de las propiedades CSS anteriores de la siguiente manera:

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

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

Ejemplo

Para configurar un panel de muestras interactivo para que se procese horizontalmente en la parte inferior del visor en dispositivos táctiles con 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 administra el componente de muestras interactivas en función de otros estilos aplicados con CSS y no se pueden 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 titular se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo

Para configurar un titular con fondo gris oscuro, borde gris más claro de dos píxeles y 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 las miniaturas de muestra:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propiedades CSS del espaciado de miniaturas de muestras

Ejemplo

Para configurar el espaciado vertical en 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 las miniaturas individuales

Ejemplo

Para configurar miniaturas de 100 x 75 píxeles:

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

El siguiente selector de clase CSS 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 que utilicen blanco, 12 píxeles, alineado a la izquierda, en 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 siguiente selector de clase CSS 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 mediante CSS top, left, bottom, y right propiedades; en su lugar, la lógica del visor las coloca automáticamente.

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

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

Ejemplo

Para configurar un botón de desplazamiento hacia arriba de 60 x 36 píxeles, tenga una ilustración diferente para cada estado y tome esa ilustración de la imagen de 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; }

Recursos de Business.Adobe.com

Content Intelligence Embedded Charts Document Generation Managed Cloud Web Content Management Digital Signage