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

width

Anchura del panel de muestras interactivo

height

Altura del panel de muestras interactivo.

parte superior

Posición superior del panel de muestras interactivo.

parte inferior

Posición inferior del panel de muestras interactivo.

izquierda

Posición izquierda del panel de muestras interactivo.

derecha

Posición derecha del panel de muestras interactivo.

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 junto con este estilo para lograr la ubicación adaptativa del panel de muestras interactivo.

Ejemplo

Para configurar un panel de muestras interactivo para que se represente 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 de 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

background-color

Color de fondo del panel del banner.

color

Color del texto dentro del panel del banner.

borde

Borde alrededor del panel del banner.

font-weight

Peso de la fuente que se utilizará para el texto dentro del panel del banner.

font-size

El tamaño de fuente que se utilizará para el texto dentro del panel del banner.

font-family

La familia de fuentes que se utilizará para el texto dentro del panel del banner.

font-align

Alineación de fuente que se utilizará para el texto dentro 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

background-color

Color de fondo 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

margin

El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado en miniatura real es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell .

Ejemplo

Para configurar el espaciado vertical para que sea de 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 del aspecto 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 aspectos a distintos estados de miniaturas. En concreto, state="selected" corresponde a la miniatura de la imagen seleccionada actualmente; state="default" corresponde al resto de 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 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

color

Color de texto.

borde

Borde de la etiqueta.

text-align

Alineación de texto horizontal.

font-family

Nombre de la fuente.

Ejemplo

Para configurar etiquetas para que utilicen alineación a la izquierda, blanco, 12 píxeles, 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

width

Anchura del botón de desplazamiento.

height

Altura del botón de desplazamiento.

imagen de fondo

Imagen que se muestra para un estado de botón determinado.

posición de fondo

Posición dentro del 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 aspectos a los estados de botones: " up", " down", " over" y " disabled".

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; }

En esta página