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 lue ne correspondent pas à celles du lecteur vidéo, le contenu vidéo est centré dans la zone d’affichage en rectangle 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 en mesure de lire la vidéo peut être localisé. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - Pour configurer une visionneuse de vidéos avec une taille de lecteur vidéo définie sur 512 x 288 pixels.

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

Les sous-titres sont placés dans un conteneur interne au sein du lecteur vidéo. La position de ce conteneur est contrôlée par des opérateurs de positionnement WebVTT pris en charge. Le texte de 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 des légendes

Exemple - Pour configurer le texte des sous-titres afin qu’il fasse 14 pixels, gris clair, Arial®, sur un arrière-plan 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é avec 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 sur une largeur de 101 pixels et une hauteur de 29 pixels :

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