Muestras interactivas

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

En los sistemas de escritorio y en los dispositivos táctiles, en orientación horizontal, las muestras interactivas se representan verticalmente a la derecha del contenido de vídeo. En los dispositivos táctiles en 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 interactivas:

.s7interactivevideoviewer .s7interactiveswatches

Propiedades CSS de las muestras interactivas

width	Ancho del panel Muestras interactivas
height	Altura del panel Muestras interactivas.
parte superior	Posición superior del panel de muestras interactivas.
parte inferior	Posición inferior del panel de muestras interactivas.
izquierda	Posición izquierda del panel de muestras interactivas.
derecha	Posición derecha del panel Muestras interactivas.

La ubicación y la 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 las muestras interactivas horizontalmente en la parte inferior del visor, defina la altura en un valor de píxel absoluto; izquierda e inferior a 0px; anchura, derecha y arriba para auto.
Para procesar muestras interactivas verticalmente a la derecha del contenido del vídeo, defina la anchura en un píxel absoluto; derecha y superior a 0px; height, izquierda e inferior para auto.

Es posible utilizar marcadores CSS junto con este estilo para lograr la colocación adaptable del panel de muestras interactivas.

Ejemplo

Para configurar un panel de muestras interactivo para que se muestre horizontalmente en la parte inferior del visor en dispositivos táctiles en orientación horizontal y para que se muestre 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 de la pancarta son administrados por 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 de pancartas:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

background-color	Color de fondo del panel de pancartas.
color	Color del texto dentro del panel de pancartas.
borde	Borde alrededor del panel de pancartas.
font-peso	El peso de fuente que se va a utilizar para el texto dentro del panel de pancartas.
font-size	El tamaño de fuente que se va a utilizar para el texto dentro del panel de pancartas.
font-family	Familia de fuentes que se va a utilizar para el texto dentro del panel de pancartas.
font-align	Alineación de fuente que se utilizará para el texto dentro del panel de pancartas.

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

Ejemplo

Para configurar una pancarta con un fondo gris oscuro, un borde de dos píxeles más claro 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

background-color

Color de fondo del área de muestras.

Ejemplo

Para configurar el área de muestras con un 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 las muestras

margin

Tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado de la miniatura real es igual a la suma del margen izquierdo y derecho establecido para .s7thumbcell .

Ejemplo

Para configurar el espaciado vertical en 10 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 de la apariencia de miniaturas individuales

width	Anchura de la miniatura.
height	Altura de la miniatura.
borde	Borde de la miniatura.

NOTA

La miniatura admite el selector de atributos state, que puede utilizar para aplicar diferentes apariencias a distintos estados de miniaturas. En particular, state="selected" corresponde a la miniatura de la imagen seleccionada actualmente; state="default" corresponde al resto de las miniaturas; state="over" se utiliza al pasar el ratón por encima.

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

color	Color de texto.
borde	Borde de etiqueta.
text-align	Alineación de texto horizontal.
font-family	Nombre de fuente.

Ejemplo

Para configurar las etiquetas para utilizar una fuente Helvetica alineada a la izquierda, blanca, 12 píxeles 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 las propiedades CSS top, left, bottom y right; en su lugar, la lógica del visor los coloca automáticamente.

Propiedades CSS de la apariencia de los botones de desplazamiento hacia arriba y hacia abajo

width	Ancho del botón de desplazamiento.
height	Altura del botón de desplazamiento.
background-image	Imagen que se muestra para un estado de botón determinado.
background-position	Posición dentro del elemento sprite de ilustración, si se utilizan sprites CSS. Consulte también Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizar para aplicar diferentes apariencias a los estados del botón: " up", " down", " over" y " disabled".

La información del objeto de botón 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; }