Arrastrar el cabezal de reproducción de vídeo

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 ocultar el cabezal de reproducción de vídeo y 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:

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob

Propiedades CSS de la barra de desplazamiento de 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 de la pista

El selector de clase CSS siguiente controla el botón:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propiedades CSS del botón

El siguiente selector de clase CSS controla la burbuja de tiempo reproducido:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Propiedades CSS de la burbuja de tiempo reproducido

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 y con colores de pista personalizados de diez píxeles de altura. Colóquelo en diez 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 el marcador de capítulo de vídeo está habilitado con el parámetro navigation , las ubicaciones de capítulo se muestran como marcadores sobre 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

Ejemplo : para configurar un marcador de capítulo de vídeo de 5 x 8 píxeles y que utilice arte 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 del vídeo se coloca sobre el marcador de capítulos del vídeo y muestra el título, la hora de inicio y la descripción de un capítulo determinado. Es posible controlar el ancho de burbuja máximo y el desplazamiento vertical en relación con la pista de desplazamiento del vídeo. El resto lo calcula automáticamente el componente.

La burbuja de capítulos del vídeo está controlada por el siguiente selector de clases CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter

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

Ejemplo : para configurar una burbuja de capítulo de vídeo de 235 píxeles de ancho y ocho píxeles de alto desde la parte inferior de la pista de desplazamiento.

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

La burbuja de capítulos del vídeo consta de un encabezado y contenido opcionales. El encabezado tiene la hora opcional de inicio 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 del vídeo

Ejemplo : para configurar un encabezado de burbuja de capítulo 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);
}

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Propiedades CSS de la hora de inicio del capítulo del vídeo

Ejemplo : para configurar el tiempo de inicio del capítulo utilizando una fuente Verdana de diez píxeles gris 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 del vídeo está controlado por el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

Propiedades CSS del título del capítulo del vídeo

Ejemplo : para configurar un título de capítulo de vídeo que utilice una fuente Verdana blanca, en negrita y de diez píxeles.

.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 del vídeo está controlada por el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

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

Ejemplo : para configurar la descripción del capítulo de vídeo con una fuente Verdana de 11 píxeles y gris oscuro con un fondo gris claro. Una altura de línea de cinco píxeles, un margen horizontal de 12 píxeles, un relleno superior de 12 píxeles y un 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 situado en la parte inferior de la burbuja del capítulo está controlado por el siguiente selector de clase CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

Propiedades CSS del conector de cuña

Ejemplo : para configurar un conector de seis píxeles de espacio 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;
}