Lecteur vidéo

Le lecteur vidéo est la zone rectangulaire dans laquelle 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 rectangle du lecteur vidéo.

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

.s7mixedmediaviewer .s7videoplayer

Propriétés CSS du lecteur vidéo

arrière-plan-couleur

Couleur d’arrière-plan du lecteur vidéo.

Le message d’erreur affiché si le système ne parvient pas à lire la vidéo peut être localisé. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - Pour rendre le lecteur vidéo transparent :

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

Les sous-titres sont placés dans un conteneur interne 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 légende lui-même se trouve à l’intérieur de ce conteneur ; son style est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7videoplayer .s7caption

Propriétés CSS des légendes

propriété CSS

Description

arrière-plan-couleur

Arrière-plan du texte de la légende.

color

Couleur du texte de la légende.

font-weight

Poids de police.

font-size

Taille de police.

font-family

Famille de polices.

Exemple - Pour configurer le texte de la légende sur un fond noir semi-transparent de 14 pixels gris clair Arial :

.s7mixedmediaviewer .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é à l’aide du sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7videoplayer .s7waiticon

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

propriété CSS

Description

width

Largeur de l’icône d’animation.

height

Hauteur de l’icône d’animation.

margin-left

Marge gauche de l’icône d’animation, normalement moins la moitié de la largeur de l’icône.

margin-top

Marge supérieure de l’icône d’animation, normalement moins la moitié de la hauteur de l’icône.

background-image

Obtenir une illustration.

Exemple - Pour configurer une animation de mise en mémoire tampon d’une largeur de 101 pixels et d’une hauteur de 29 pixels :

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

Sur cette page