Reproductor de vídeo

El reproductor de vídeo es el área rectangular en la que se muestra el contenido del vídeo en el visor.

Si las dimensiones del vídeo que se está reproduciendo no coinciden con las del reproductor de vídeo, el contenido del vídeo se centra en el área de visualización rectangular del reproductor de vídeo.

El siguiente selector de clase CSS controla el aspecto del reproductor de vídeo:

.s7videoviewer .s7videoplayer

Propiedades CSS del reproductor de vídeo

Se puede localizar el mensaje de error que se muestra si el sistema no puede reproducir el vídeo. 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 el tamaño del reproductor de vídeo definido en 512 x 288 píxeles.

.s7videoviewer .s7videoplayer{ 
background-color: transparent; 
}

Los subtítulos cerrados se colocan en un contenedor interno dentro del reproductor de vídeo. La posición de ese contenedor está controlada por los operadores de posicionamiento WebVTT admitidos. El texto del rótulo está dentro de ese contenedor y su estilo se controla con el siguiente selector de clase CSS:

. s7videoviewer .s7 videoplayer .s7caption

Propiedades CSS de los subtítulos opcionales

Ejemplo: para configurar el texto de los subtítulos opcionales en 14 píxeles, gris claro, Arial, sobre un fondo negro semitransparente:

.s7videoviewer .s7videoplayer .s7caption { 
 background-color: rgba(0,0,0,0.75); 
 color: #e6e6e6; 
 font-weight: normal; 
 font-size: 14px; 
 font-family: Arial,Helvetica,sans-serif; 
}

El aspecto de la animación de almacenamiento en búfer se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7videoplayer .s7waiticon

Propiedades CSS del icono de espera

Ejemplo: para configurar una animación de almacenamiento en búfer para que tenga 101 píxeles de ancho y 29 píxeles de alto:

.s7videoviewer .s7videoplayer .s7waiticon { 
 width: 101px; 
 height: 29px; 
 margin-left: -50px; 
 margin-top: -15px; 
 background-image: url(images/sdk/busyicon.gif); 
}