Muestras interactivas

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

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

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

background-color

Color de fondo del panel del titular.

color

Color del texto dentro del panel del titular.

borde

Borde alrededor del panel del titular.

font-weight

Grosor de fuente que se utilizará para el texto del panel del titular.

font-size

Tamaño de fuente que se utilizará para el texto del panel del titular.

font-family

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

font-align

Alineación de fuente que se utilizará para el texto del panel del titular.

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

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 las miniaturas de muestra:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propiedades CSS del espaciado de miniaturas de muestras

margin

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

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

width

Ancho de la miniatura.

height

Altura de la miniatura.

borde

Borde de la miniatura.

NOTA

La miniatura admite state selector de atributos, que puede utilizar para aplicar diferentes aspectos a diferentes estados de miniaturas. En particular, 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 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 del texto.

borde

Borde de etiqueta.

text-align

Alineación de texto horizontal.

font-family

Nombre de la fuente.

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

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

La posición dentro del sprite de la ilustración, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

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

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

En esta página