Barra de desplazamiento de vídeo

La barra de desplazamiento de vídeo es el control deslizante horizontal que permite al usuario buscar dinámicamente cualquier posición temporal dentro del vídeo que se está reproduciendo.

El control 'knob' de la barra 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 deslizar la barra de desplazamiento del vídeo. cambie la altura y la posición vertical mediante CSS.

El aspecto general de la barra de desplazamiento 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 del seguimiento

height	Altura de la pista correspondiente.
background-color	Color de la pista correspondiente.

El siguiente selector de clase CSS controla el control:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propiedades CSS del botón

parte superior	Desplazamiento vertical del botón.
width	Anchura del pomo.
height	Altura del pomo.
background-image	Ilustración del botón.
background-position	Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS .

El siguiente selector de clase CSS controla el tiempo de reproducción de la burbuja:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Propiedades CSS de la burbuja de tiempo de reproducción

font-family	Familia de fuentes que se va a utilizar para mostrar el texto durante el tiempo.
font-size	El tamaño de fuente que se va a utilizar para mostrar el texto durante el tiempo.
color	El color de fuente que se usará para mostrar el texto durante el tiempo.
width	Ancho del área de burbujas.
height	Altura del área de burbujas.
relleno	Relleno del área de burbujas.
background-image	Ilustración de burbujas.
background-position	Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS .
text-align	Alineación del texto con el área de la burbuja.

La información de la herramienta de limpieza 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 con colores de pista personalizados de 10 píxeles de altura y colocados 10 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 se habilita el capítulo de vídeo con el parámetro navigation, las ubicaciones de capítulo se muestran como marcadores en la parte superior de 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	Ancho del marcador de capítulos de vídeo.
height	Altura del marcador de capítulos de vídeo.
background-image	Ilustración del marcador de capítulos de vídeo.
background-position	Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS .

Ejemplo : para configurar un marcador de capítulo de vídeo de 5 x 8 píxeles y utilizar una ilustración 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 de vídeo se sitúa sobre el marcador de capítulos de vídeo y muestra el título, la hora de inicio y la descripción de un capítulo determinado. Es posible controlar la anchura máxima de la burbuja y el desplazamiento vertical en relación con la pista de la barra de desplazamiento del vídeo. El resto lo calcula automáticamente el componente.

La burbuja de capítulos de vídeo está controlada por el siguiente selector de clases CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter

Propiedades CSS de la burbuja de capítulos de vídeo

max-width	Ancho máximo de la burbuja de capítulos de vídeo.
parte inferior	Desplazamiento vertical de la pista de desplazamiento de vídeo.

Ejemplo : para configurar una burbuja de capítulos de vídeo de 235 píxeles de ancho y ocho píxeles de alto desde la parte inferior de la pista de desplazamiento de vídeo.

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

La burbuja de capítulos de vídeo consta de un encabezado y contenido opcionales. El encabezado tiene el tiempo de inicio opcional 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 de vídeo

height	Altura del encabezado de la burbuja de capítulos de vídeo.
relleno	Relleno interior para texto de encabezado de burbujas de capítulos de vídeo.
background-color	Color de fondo del encabezado de burbuja de capítulos 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ítulos 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); 
}

El tiempo de inicio del capítulo de vídeo se controla mediante el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Propiedades CSS del tiempo de inicio del capítulo de vídeo

color	Color de texto.
font-peso	Peso de fuentes.
font-size	Tamaño de fuente.
font-family	Familia de fuentes.
relleno-derecha	Relleno entre el tiempo de inicio y el título del capítulo.

Ejemplo : para configurar el tiempo de inicio del capítulo con una fuente Verdana gris de diez píxeles 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 de vídeo está controlado por el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

Propiedades CSS del título del capítulo de vídeo

color	Color del texto del título del capítulo de vídeo.
font-peso	Peso de fuente del título del capítulo de vídeo.
font-size	Tamaño de fuente del título del capítulo de vídeo.
font-family	Familia de fuentes del título del capítulo de vídeo.

Ejemplo : para configurar un título de capítulo de vídeo que utilice una fuente Verdana de diez píxeles en blanco, negrita y negrita.

.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 de vídeo está controlada por el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

Propiedades CSS de la descripción del capítulo de vídeo

color	Color de texto de descripción del capítulo de vídeo.
background-color	Color de fondo de descripción del capítulo de vídeo.
font-peso	Peso de fuentes de descripción de capítulos de vídeo.
font-size	Tamaño de fuente de descripción del capítulo de vídeo.
font-family	Descripción de la familia de fuentes del capítulo de vídeo.
line-height	Alto de línea de descripción del capítulo de vídeo.
relleno	Descripción del relleno interior del capítulo de vídeo.

Ejemplo : para configurar la descripción de capítulos de vídeo con una fuente Verdana de 11 píxeles y gris oscuro con un fondo gris claro; 5 píxeles de altura de línea, 12 píxeles de margen horizontal, 12 píxeles de relleno superior y 9 píxeles de relleno inferior.

.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 de capítulos está controlado por el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

Propiedades CSS del conector de cuña

border-color	Color del conector de arista. Definido como <color> transparente de modo que sólo se defina el color del borde superior y los bordes restantes se dejen transparentes.
border-width	Anchura del conector Wedge. Definido como <width> <width> 0 de manera que la misma anchura se defina sólo para los bordes superior y horizontal y la anchura del borde inferior sea 0 .
margin	Define un margen inferior negativo solamente. Debe tener el mismo valor que el de border-width .

Ejemplo : para configurar un conector de seis píxeles de cuña 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; 
}