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:

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

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

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

.s7mixedmediaviewer .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 medios mixtos con una barra de desplazamiento de vídeo con colores de seguimiento 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.

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

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free