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