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:
.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 elementos de la interfaz de usuario para obtener más información.
Ejemplo - Para configurar un visor de vídeo con una selección manual de vídeo y con colores de pista personalizados que tengan diez píxeles de alto. 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 el parámetro navigation, las ubicaciones de los capítulos se muestran como marcadores en la parte superior de la pista de desplazamiento del 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
state, que puede utilizar para aplicar distintos aspectos a distintos estados de botón. 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 una imagen 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í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 del capítulo de vídeo
Ejemplo: Para configurar una burbuja de capítulo de vídeo de 235 píxeles de ancho y ocho píxeles de altura desde la parte inferior de la pista de desplazamiento del 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 de la hora 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 use una fuente Verdana blanca, 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 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 con una fuente Verdana de 11 píxeles, gris oscuro y con 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;
}