Depurador de vídeo video-scrubber

El depurador 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 "botón" 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. El depurador de vídeo siempre tiene toda la anchura de la barra de control. Es posible desollar el 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 del depurador 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 selección manual de vídeo.
background-color
El color de la selección manual del vídeo.

Los siguientes selectores de clase CSS rastrean los 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 siguiente selector de clase CSS controla el control:

.s7smartcropvideoviewer .s7videoscrubber .s7knob

Propiedades CSS del control

parte superior
Desplazamiento vertical del control.
width
Anchura del pomo.
height
Altura del pomo.
background-image
Pintura del pomo.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

El siguiente selector de clase CSS controla la burbuja de tiempo pasado:

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

Propiedades CSS de la burbuja de tiempo pasado

font-family
La familia de fuentes que se utilizará para el texto de visualización del tiempo.
font-size
El tamaño de fuente que se utilizará para el texto de visualización de tiempo.
color
El color de fuente que se utilizará para el texto de visualización del tiempo.
width
Anchura del área de burbujas.
height
Altura del área de burbujas.
relleno
Relleno de área de burbujas.
background-image
Burbujas de arte.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

text-align
Alineación del texto con el área de burbujas.

La información del objeto de selección manual de vídeo se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo - Configurar un visor de vídeo con un depurador de vídeo con colores de pista personalizados que tengan diez píxeles de altura. Y, por último, colocarlo a 10 píxeles y 35 píxeles de 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8