Depurador de vídeo

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:

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

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

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

.s7interactivevideoviewer .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 y con colores de pista personalizados que tengan diez píxeles de altura. Colóquelo a diez píxeles y a 35 píxeles de 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 el marcador de 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:

.s7interactivevideoviewer .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 .

NOTA

Este botón admite 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".

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

.s7interactivevideoviewer .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.

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

.s7interactivevideoviewer .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.

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

.s7interactivevideoviewer .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.

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

.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 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. Alto de línea de cinco píxeles, relleno horizontal de 12 píxeles, relleno superior de 12 píxeles y relleno inferior de nueve píxeles.

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

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

.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