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 à celles 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

arrière-plan-couleur

Couleur d’arrière-plan de la vue principale.

Le message d’erreur qui s’affiche si le système n’est pas capable 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 dont la taille du lecteur vidéo est définie sur 512 x 288 pixels.

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

Les sous-titres fermés 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 la légende se trouve à l’intérieur de ce conteneur et son style est contrôlé à l’aide du sélecteur de classe CSS suivant :

. s7videoviewer .s7 videoplayer .s7caption

Propriétés CSS du sous-titrage

arrière-plan-couleur

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

color

Couleur du texte de la légende à fermer.

font-poids

Poids de police de la légende fermée.

font-size

Taille de police de la légende fermée.

font-family

Police de sous-titrage fermée.

Exemple - Pour définir un texte de sous-titrage fermé de 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é par le sélecteur de classe CSS suivant :

.s7videoviewer .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.

marge-gauche

L’icône d’animation a la marge gauche, habituellement moins la moitié de la largeur de l’icône.

margin-top

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

image d’arrière-plan

Touchez l’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 :

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

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now