Arrastrar el cabezal de reproducción de vídeo

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 del vídeo. cambie 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 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 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 .

NOTA

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

En esta página