Depurador de vídeo video-scrubber

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 despellejar el depurador de vídeo y cambiar su altura y posición vertical, por CSS.

El aspecto general del depurador de vídeo se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .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:

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .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:

.s7videoviewer .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:

.s7videoviewer .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 - Para configurar un visor de vídeo con un depurador de vídeo con colores de pista personalizados. El depurador debe tener diez píxeles de altura y estar situado a diez píxeles y 35 píxeles de los bordes superior e izquierdo de la barra de control.

.s7videoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7videoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7videoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7videoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}

Cuando el capítulo de vídeo está habilitado con navigation , las ubicaciones de los capítulos se muestran como marcadores en la parte superior de la pista del depurador de vídeo.

El marcador de capítulo de vídeo está controlado por el siguiente selector de clase CSS:

 .s7videoviewer .s7videoscrubber .s7navigation

Propiedades CSS del marcador de capítulo de vídeo

width
Ancho del marcador del capítulo de vídeo.
height
Altura del marcador del capítulo de vídeo.
background-image
Ilustración de marcador de capítulo de vídeo.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

NOTE
Este botón es compatible con el state selector de atributos, que puede utilizar para aplicar diferentes aspectos a distintos estados de botones. En particular, selected='default' corresponde al estado predeterminado del marcador de capítulo de vídeo y selected='over' se utiliza cuando el marcador de capítulo de vídeo se activa mediante un gesto táctil o al pasar el ratón por encima.

Ejemplo - Para configurar un marcador de capítulo de vídeo de 5 x 8 píxeles y que utilice diferentes imágenes para los estados "por defecto" y "sobre".

.s7videoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7videoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}

La burbuja de capítulo de vídeo se coloca sobre el marcador de capítulo 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 del depurador de vídeo. El resto se calcula automáticamente mediante el componente.

La burbuja de capítulo de vídeo está controlada por el siguiente selector de clase CSS:

.s7videoviewer .s7videoscrubber .s7chapter

Propiedades CSS de la burbuja de capítulos de vídeo

max-width
Anchura máxima de la burbuja del capítulo de vídeo.
parte inferior
Desplazamiento vertical desde la pista del depurador de vídeo.

Ejemplo - Para configurar una burbuja de capítulo de vídeo que tenga 235 píxeles de ancho y ocho píxeles de altura desde la parte inferior de la pista de selección manual de vídeo.

.s7videoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}

La burbuja del capítulo de vídeo consta de un encabezado y contenido opcionales. El encabezado incluye la hora de inicio y el título de capítulo opcionales.

El encabezado está controlado por el siguiente selector de clase CSS:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

Propiedades CSS del encabezado de burbuja del capítulo de vídeo

height
Altura del encabezado de burbuja del capítulo de vídeo.
relleno
Relleno interno del texto del encabezado de la burbuja del capítulo de vídeo.
background-color
Color de fondo del encabezado de burbuja del capítulo de vídeo.
altura de línea
Altura de línea del encabezado de la burbuja del capítulo de vídeo

Ejemplo - Para configurar un encabezado de burbuja de capítulo de vídeo de 22 píxeles de alto, una altura de línea de 22 píxeles, un margen horizontal de 12 píxeles y un fondo gris.

.s7videoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}

La hora de inicio del capítulo de vídeo se controla mediante el siguiente selector de clase CSS:

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Propiedades CSS del tiempo de inicio del capítulo de vídeo

color
Color del texto.
font-weight
Grosor de fuente.
font-size
Tamaño de fuente.
font-family
Familia de fuentes.
padding-right
Relleno entre la hora de inicio y el título del capítulo.

Ejemplo - Para configurar el tiempo de inicio del capítulo con la fuente Verdana gris de diez píxeles y tiene un margen de diez píxeles a la derecha.

.s7videoviewer .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:

.s7videoviewer .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 del vídeo.
font-weight
Grosor de fuente del título del capítulo del vídeo.
font-size
Tamaño de fuente del título del capítulo del 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 utiliza una fuente blanca, negrita, diez píxeles Verdana.

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

Propiedades CSS de la descripción del capítulo de vídeo

color
Color del texto de descripción del capítulo de vídeo.
background-color
Color de fondo de la descripción del capítulo de vídeo.
font-weight
Grosor de fuente de descripción del capítulo de vídeo.
font-size
Tamaño de fuente de la descripción del capítulo de vídeo.
font-family
Familia de fuentes de descripción del capítulo de vídeo.
altura de línea
Altura de línea de descripción del capítulo de vídeo.
relleno
Relleno interno de la descripción del capítulo de vídeo.

Ejemplo - Para configurar la descripción del capítulo de vídeo utilizando una fuente Verdana de 11 píxeles de color gris oscuro, con un fondo gris claro. Y finalmente, utiliza una altura de línea de cinco píxeles, un margen horizontal de 12 píxeles, un margen superior de 12 píxeles y un margen inferior de nueve píxeles.

.s7videoviewer .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 dentro de la parte inferior de la burbuja de capítulos se controla mediante el siguiente selector de clase CSS:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

Propiedades CSS del conector de cuña

border-color

Color del conector de cuña.

Definido como <color> transparente para que sólo se defina el color del borde superior y los bordes restantes sean transparentes.

border-width

Ancho del conector de cuña.

Definido como <width> <width> 0 de forma que se defina la misma anchura solo para los bordes superior y horizontal, y la anchura del borde inferior sea 0 .

margin
Define solo un margen inferior negativo. Debe tener el mismo valor que border-width .

Ejemplo - Para configurar un conector de cuña gris de seis píxeles:

.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8