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