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 aplicar máscara al depurador de vídeo, 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:

.s7smartcropvideoviewer .s7videoscrubber 
.s7smartcropvideoviewer .s7videoscrubber .s7videotime 
.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .s7videoscrubber .s7track 
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded 
.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .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 diez píxeles de altura. Y finalmente, que se posicione 10 píxeles y 35 píxeles desde los bordes superior e izquierdo de la barra de control.

.s7smartcropvideoviewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7smartcropvideoviewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

En esta página