DocumentationGuide de référence des visionneuses Dynamic Media

Bouton Lire/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 lecture/pause entraîne la lecture ou la suspension du contenu vidéo par le lecteur vidéo lorsqu’un utilisateur 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’apparence du bouton :

.s7video360viewer .s7playpausebutton

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

Retour au début
Position à partir de la bordure supérieure, y compris le rembourrage.
Droite
Position à partir de la bordure droite, y compris le rembourrage.
Gauche
Position à partir de la bordure gauche, remplissage compris.
fond
Position à partir de la bordure inférieure, remplissage compris.
Largeur
Largeur du bouton.
hauteur
Hauteur du bouton.
image d’arrière-plan
Image affichée pour un état donné du bouton.
position de l’arrière-plan

Position à l’intérieur du sprite de l’illustration, si des sprites CSS sont utilisés.

Voir SpritesCSS.

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. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un bouton lecture/pause de 32 x 32 pixels. Placez-le à 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 lorsqu’il est sélectionné ou non.

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