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
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:
Es posible utilizar marcadores CSS junto con este estilo para lograr la colocación adaptable del panel de muestras interactivas.
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.
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
background-color |
Color de fondo del área de muestras. |
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
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 . |
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
width |
Anchura de la miniatura. |
height |
Altura de la miniatura. |
borde |
Borde de la miniatura. |
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.
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
color |
Color de texto. |
borde |
Borde de etiqueta. |
text-align |
Alineación de texto horizontal. |
font-family |
Nombre de fuente. |
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.
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 . |
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.
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; }