Depurador de vídeo

Última actualización: 2023-05-23
  • Creado para:
  • Developer
    User

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

En esta página