Lecteur vidéo video-player

Le lecteur vidéo est la zone rectangulaire où le contenu vidéo est affiché dans la visionneuse.

Si les dimensions de la vidéo en cours de lecture ne correspondent pas aux dimensions du lecteur vidéo, le contenu vidéo est centré dans la zone d’affichage rectangulaire du lecteur vidéo.

Le sélecteur de classe CSS suivant contrôle l’aspect du lecteur vidéo :

.s7videoviewer .s7videoplayer

Propriétés CSS du lecteur vidéo

Le message d’erreur qui s’affiche si le système n’est pas capable de lire la vidéo peut être localisé. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer une visionneuse de vidéos avec la taille du lecteur vidéo réglée sur 512 x 288 pixels.

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

Les sous-titres sont placés dans un conteneur interne à l’intérieur du lecteur vidéo. La position de ce conteneur est contrôlée par les opérateurs de positionnement WebVTT pris en charge. Le texte de la légende lui-même se trouve à l’intérieur de ce conteneur et son style est contrôlé par le sélecteur de classe CSS suivant :

. s7videoviewer .s7 videoplayer .s7caption

Propriétés CSS du sous-titrage

Exemple - Pour définir le texte du sous-titrage afin qu’il soit de 14 pixels, gris clair, arial®, sur un fond noir semi-transparent :

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

L’aspect de l’animation de mise en mémoire tampon est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7videoplayer .s7waiticon

Propriétés CSS de l’icône d’attente

Exemple : pour configurer une animation de mise en mémoire tampon de 101 pixels de large, 29 pixels de haut :

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