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

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

El siguiente selector de clase CSS controla el control:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propiedades CSS del control

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Propiedades CSS de la burbuja de tiempo pasado

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

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

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

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

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

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

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

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

Recursos de Business.Adobe.com

Ecommerce Integrations Auto Text Summarization Style System Web Content Management Digital Rights Management Headless Cms