DocumentationAEMGuide de référence des visionneuses Dynamic Media

Bouton Lecture/Pause play-pause-button

Dernière mise à jour : 15 août 2025

Créé pour :

  • {"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

Le bouton Lecture/Pause entraîne la lecture ou la mise en pause du contenu vidéo lorsqu’un utilisateur le sélectionne.

Vous pouvez dimensionner, appliquer une enveloppe 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 :

.s7mixedmediaviewer .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, y compris la marge intérieure.
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 state, selected et replay, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, selected='true' correspond à l'état « play » et selected='false' correspond à l'état « pause »;
replay='true' Cet attribut est défini lorsque la vidéo a atteint sa fin et que vous sélectionnez le bouton pour redémarrer 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 Lecture/Pause de 32 x 32 pixels 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.

.s7mixedmediaviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref