Barra de desplazamiento de vídeo

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 .

NOTA

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

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free