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