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:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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 vídeo con una barra de desplazamiento de vídeo con colores de pista 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.
.s7interactivevideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
Cuando se habilita el capítulo de vídeo con el parámetro navigation
, las ubicaciones de capítulo se muestran como marcadores en la parte superior de la pista de desplazamiento de vídeo.
El marcador de capítulo de vídeo está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
Propiedades CSS del marcador de capítulo de vídeo
width |
Ancho del marcador de capítulos de vídeo. |
height |
Altura del marcador de capítulos de vídeo. |
background-image |
Ilustración del marcador de capítulos de vídeo. |
background-position |
Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite el selector de atributos state
, que puede utilizar para aplicar diferentes apariencias a distintos estados de botones. En particular, selected='default'
corresponde al estado del marcador de capítulo de vídeo predeterminado y selected='over'
se utiliza cuando el marcador de capítulo de vídeo se activa mediante un gesto de toque o de desplazamiento del ratón.
Ejemplo : para configurar un marcador de capítulo de vídeo de 5 x 8 píxeles y utilizar una ilustración diferente para los estados "predeterminado" y "sobre".
.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
La burbuja de capítulos de vídeo se sitúa sobre el marcador de capítulos de vídeo y muestra el título, la hora de inicio y la descripción de un capítulo determinado. Es posible controlar la anchura máxima de la burbuja y el desplazamiento vertical en relación con la pista de la barra de desplazamiento del vídeo. El resto lo calcula automáticamente el componente.
La burbuja de capítulos de vídeo está controlada por el siguiente selector de clases CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Propiedades CSS de la burbuja de capítulos de vídeo
max-width |
Ancho máximo de la burbuja de capítulos de vídeo. |
parte inferior |
Desplazamiento vertical de la pista de desplazamiento de vídeo. |
Ejemplo : para configurar una burbuja de capítulos de vídeo de 235 píxeles de ancho y ocho píxeles de alto desde la parte inferior de la pista de desplazamiento de vídeo.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
La burbuja de capítulos de vídeo consta de un encabezado y contenido opcionales. El encabezado tiene el tiempo de inicio opcional del capítulo y el título del capítulo.
El encabezado está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
Propiedades CSS del encabezado de burbuja de capítulos de vídeo
height |
Altura del encabezado de la burbuja de capítulos de vídeo. |
relleno |
Relleno interior para texto de encabezado de burbujas de capítulos de vídeo. |
background-color |
Color de fondo del encabezado de burbuja de capítulos de vídeo. |
line-height |
Altura de la línea de texto del encabezado de la burbuja de capítulos de vídeo. |
Ejemplo : para configurar un encabezado de burbuja de capítulos de vídeo con una altura de 22 píxeles, una altura de línea de 22 píxeles, un margen horizontal de 12 píxeles y un fondo gris.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
El tiempo de inicio del capítulo de vídeo se controla mediante el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Propiedades CSS del tiempo de inicio del capítulo de vídeo
color |
Color de texto. |
font-peso |
Peso de fuentes. |
font-size |
Tamaño de fuente. |
font-family |
Familia de fuentes. |
relleno-derecha |
Relleno entre el tiempo de inicio y el título del capítulo. |
Ejemplo : para configurar el tiempo de inicio del capítulo con una fuente Verdana gris de diez píxeles y con un margen de diez píxeles a la derecha.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
El título del capítulo de vídeo está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
Propiedades CSS del título del capítulo de vídeo
color |
Color del texto del título del capítulo de vídeo. |
font-peso |
Peso de fuente del título del capítulo de vídeo. |
font-size |
Tamaño de fuente del título del capítulo de vídeo. |
font-family |
Familia de fuentes del título del capítulo de vídeo. |
Ejemplo : para configurar un título de capítulo de vídeo que utilice una fuente Verdana de diez píxeles en blanco, negrita y negrita.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
La descripción del capítulo de vídeo está controlada por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Propiedades CSS de la descripción del capítulo de vídeo
color |
Color de texto de descripción del capítulo de vídeo. |
background-color |
Color de fondo de descripción del capítulo de vídeo. |
font-peso |
Peso de fuentes de descripción de capítulos de vídeo. |
font-size |
Tamaño de fuente de descripción del capítulo de vídeo. |
font-family |
Descripción de la familia de fuentes del capítulo de vídeo. |
line-height |
Alto de línea de descripción del capítulo de vídeo. |
relleno |
Descripción del relleno interior del capítulo de vídeo. |
Ejemplo : para configurar la descripción de capítulos de vídeo con una fuente Verdana de 11 píxeles y gris oscuro con un fondo gris claro; 5 píxeles de altura de línea, 12 píxeles de margen horizontal, 12 píxeles de relleno superior y 9 píxeles de relleno inferior.
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description {
color: #333333;
background-color: rgba(221, 221, 221, 0.9);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 15px;
padding: 12px 12px 9px;
}
El conector de cuña situado en la parte inferior de la burbuja de capítulos está controlado por el siguiente selector de clase CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
Propiedades CSS del conector de cuña
border-color |
Color del conector de arista. Definido como <color> transparente de modo que sólo se defina el color del borde superior y los bordes restantes se dejen transparentes. |
border-width |
Anchura del conector Wedge. Definido como <width> <width> 0 de manera que la misma anchura se defina sólo para los bordes superior y horizontal y la anchura del borde inferior sea 0 . |
margin |
Define un margen inferior negativo solamente. Debe tener el mismo valor que el de border-width . |
Ejemplo : para configurar un conector de seis píxeles de cuña gris:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}