La barra de desplazamiento del vídeo es el control deslizante horizontal que permite al usuario buscar dinámicamente cualquier posición horaria dentro del vídeo que se está reproduciendo.
El control de desplazamiento también se mueve a medida que se reproduce el vídeo para indicar la posición de tiempo actual del vídeo durante la reproducción. La barra de desplazamiento de vídeo siempre toma toda la anchura de la barra de control. Es posible ocultar el cabezal de reproducción de vídeo y cambiar su altura y posición vertical mediante CSS.
El aspecto general del depurador de vídeo se controla con el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
Propiedades CSS de la barra de desplazamiento de vídeo
parte superior |
Posición desde el borde superior, incluido el relleno. |
parte inferior |
Posición desde el borde inferior, incluido el relleno. |
height |
Altura de la barra de desplazamiento del vídeo. |
background-color |
Color de la barra de desplazamiento del vídeo. |
Los siguientes selectores de clase CSS rastrean indicadores de fondo, reproducción y carga:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
Propiedades CSS de la pista
height |
Altura de la pista correspondiente. |
background-color |
El color de la pista correspondiente. |
El selector de clase CSS siguiente controla el botón:
.s7interactivevideoviewer .s7videoscrubber .s7knob
Propiedades CSS del botón
parte superior |
Desplazamiento vertical del pomo. |
width |
Anchura del pomo. |
height |
Altura del pomo. |
imagen de fondo |
Ilustración del botón. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
El siguiente selector de clase CSS controla la burbuja de tiempo reproducido:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
Propiedades CSS de la burbuja de tiempo reproducido
font-family |
La familia de fuentes que se usará para el texto de visualización de la hora. |
font-size |
El tamaño de fuente que se utilizará para el texto de visualización de la hora. |
color |
Color de fuente que se usará para el texto de visualización de la hora. |
width |
Anchura del área de burbujas. |
height |
Altura del área de burbujas. |
relleno |
Margen de área de burbujas. |
imagen de fondo |
Ilustración de burbujas. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
text-align |
Alineación del texto con el área de burbujas. |
La información de la herramienta de desplazamiento de vídeo se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Ejemplo : Para configurar un visor de vídeo con una barra de desplazamiento de vídeo y con colores de pista personalizados de diez píxeles de altura. Colóquelo en diez píxeles y 35 píxeles desde los bordes superior e izquierdo de la barra de control.
.s7interactivevideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
Cuando el marcador de capítulo de vídeo está habilitado con el parámetro navigation
, las ubicaciones de capítulo se muestran como marcadores sobre la pista de desplazamiento de vídeo.
El marcador de capítulo de vídeo está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
Propiedades CSS del marcador de capítulo de vídeo
width |
Anchura del marcador de capítulo del vídeo. |
height |
Altura del marcador del capítulo del vídeo. |
imagen de fondo |
Ilustración del marcador de capítulo de vídeo. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite el selector de atributos state
, que puede utilizar para aplicar diferentes aspectos a distintos estados de botones. En concreto, selected='default'
corresponde al estado del marcador de capítulo de vídeo predeterminado y selected='over'
se utiliza cuando el marcador de capítulo de vídeo se activa mediante un gesto de ratón sobre o contacto.
Ejemplo : para configurar un marcador de capítulo de vídeo de 5 x 8 píxeles y que utilice arte diferente para los estados "predeterminado" y "sobre".
.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
La burbuja de capítulos del vídeo se coloca sobre el marcador de capítulos del vídeo y muestra el título, la hora de inicio y la descripción de un capítulo determinado. Es posible controlar el ancho de burbuja máximo y el desplazamiento vertical en relación con la pista de desplazamiento del vídeo. El resto lo calcula automáticamente el componente.
La burbuja de capítulos del vídeo está controlada por el siguiente selector de clases CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Propiedades CSS de la burbuja de capítulos del vídeo
max-width |
Anchura máxima de la burbuja de capítulos del vídeo. |
parte inferior |
Desplazamiento vertical desde la pista de desplazamiento del vídeo. |
Ejemplo : para configurar una burbuja de capítulo de vídeo de 235 píxeles de ancho y ocho píxeles de alto desde la parte inferior de la pista de desplazamiento.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
La burbuja de capítulos del vídeo consta de un encabezado y contenido opcionales. El encabezado tiene la hora opcional de inicio del capítulo y el título del capítulo.
El encabezado está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
Propiedades CSS del encabezado de burbuja de capítulos del vídeo
height |
Altura del encabezado de la burbuja de capítulos del vídeo. |
relleno |
Margen interior para el texto del encabezado de burbuja del capítulo de vídeo. |
background-color |
Color de fondo del encabezado de la burbuja del capítulo de vídeo. |
line-height |
Altura de la línea de texto del encabezado de la burbuja de capítulos de vídeo. |
Ejemplo : para configurar un encabezado de burbuja de capítulo de vídeo con una altura de 22 píxeles, una altura de línea de 22 píxeles, un margen horizontal de 12 píxeles y un fondo gris.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
La hora de inicio del capítulo del vídeo está controlada por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Propiedades CSS de la hora de inicio del capítulo del vídeo
color |
Color de texto. |
font-weight |
Grosor de fuente. |
font-size |
Tamaño de fuente. |
font-family |
Familia de fuentes. |
relleno-derecha |
Relleno entre la hora de inicio y el título del capítulo. |
Ejemplo : para configurar el tiempo de inicio del capítulo utilizando una fuente Verdana de diez píxeles gris y con un margen de diez píxeles a la derecha.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
El título del capítulo del vídeo está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
Propiedades CSS del título del capítulo del vídeo
color |
Color del texto del título del capítulo del vídeo. |
font-weight |
Grosor de fuente del título del capítulo del vídeo. |
font-size |
Tamaño de fuente del título del capítulo del vídeo. |
font-family |
Familia de fuentes del título del capítulo del vídeo. |
Ejemplo : para configurar un título de capítulo de vídeo que utilice una fuente Verdana blanca, en negrita y de diez píxeles.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
La descripción del capítulo del vídeo está controlada por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Propiedades CSS de la descripción del capítulo del vídeo
color |
Color del texto de la descripción del capítulo del vídeo. |
background-color |
Color de fondo de la descripción del capítulo del vídeo. |
font-weight |
Grosor de fuente de la descripción del capítulo del vídeo. |
font-size |
Tamaño de fuente de la descripción del capítulo del vídeo. |
font-family |
Descripción de la fuente del capítulo del vídeo. |
line-height |
Altura de la línea de descripción del capítulo del vídeo. |
relleno |
Margen interior de descripción del capítulo del vídeo. |
Ejemplo : para configurar la descripción del capítulo de vídeo con una fuente Verdana de 11 píxeles y gris oscuro con un fondo gris claro. Una altura de línea de cinco píxeles, un margen horizontal de 12 píxeles, un relleno superior de 12 píxeles y un relleno inferior de nueve píxeles.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description {
color: #333333;
background-color: rgba(221, 221, 221, 0.9);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 15px;
padding: 12px 12px 9px;
}
El conector de cuña situado en la parte inferior de la burbuja del capítulo está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
Propiedades CSS del conector de cuña
borde-color |
Color del conector de borde. Definido como <color> transparente para que solo se defina el color del borde superior y los bordes restantes se queden transparentes. |
ancho de borde |
Anchura del conector Wedge. Definido como <width> <width> 0 de modo que el mismo ancho se defina solo para los bordes superior y horizontal y el ancho del borde inferior sea 0 . |
margin |
Define únicamente un margen inferior negativo. Debe tener el mismo valor que borde-ancho . |
Ejemplo : para configurar un conector de seis píxeles de espacio gris:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}