DocumentationGuide de référence des visionneuses Dynamic Media

Bouton Lecture/Pause play-pause-button

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

Le bouton de lecture/pause entraîne la lecture ou la mise en pause du contenu vidéo par le lecteur lorsqu’un utilisateur ou une utilisatrice clique dessus.

Vous pouvez dimensionner, envelopper et positionner le bouton, par rapport à la barre de contrôle qui le contient, par CSS.

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

.s7videoviewer .s7playpausebutton

Propriétés CSS du bouton de lecture/pause css-properties-of-the-play-pause-button

top
Position à partir de la bordure supérieure, y compris la marge intérieure.
droit
Position à partir de la bordure droite, marge intérieure incluse.
gauche
Position à partir de la bordure gauche, marge intérieure incluse.
inférieur
Position à partir de la bordure inférieure, remplissage compris.
Largeur
Largeur du bouton.
de hauteur
Hauteur du bouton.
le image d’arrière-plan
Image affichée pour un état de bouton donné.
la position de l’arrière-plan

Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.

Voir desSprites CSS.

NOTE
Ce bouton prend en charge les sélecteurs d’attributs et state selected d’attributsreplay, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, selected='true' correspond à l’état « lecture » et selected='false' correspond à l’état « pause » ;
Le sélecteur replay='true' d’attributs est défini lorsque la vidéo a atteint la fin et que la sélection du bouton redémarre la lecture depuis le début.

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple section-e8caea0a303c425a8a637c2a47c06355

Pour configurer un bouton de lecture/pause de 32 x 32 pixels et positionné à six pixels des bords supérieur et gauche de la barre de contrôle. Enfin, affiche une image différente pour chacun des quatre états de bouton différents, qu’ils soient sélectionnés ou non.

.s7videoviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7videoviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8