Play button (Bouton de lecture)

Le bouton de lecture permet de contrôler la lecture d’un média audio ou vidéo. Il s’agit d’un interrupteur à 2 états : play / pause. Il existe par ailleurs en différents formats en fonction de l’affichage d’une information de temporalité ou non.

Usage

• Il existe en 2 états : état par défaut / état en lecture.
• L’état par défaut permet de lancer la lecture du média et l’état en lecture permet de faire pause.
• Le changement d’état se fait à chaque clic.
• Il existe aussi en 2 versions : la version simple et une version plus complète intégrant une indication de temps.

Bonnes pratiques

• Pour afficher la durée, utilisez une écriture de type xx min (p. ex. « 43 min »), le temps en minute(s) étant arrondi. Si cette durée excède 1 heure, restez en minutes (p. ex. « 125 min »).

Style & code

Standard

La version standard est la version simple c’est-à-dire qu’elle ne comporte rien d’autre que l’icône, il n’y a pas d’affichage du temps de lecture. Pour construire ce composant, il suffit d’un bouton primaire à icône seule (su-button su-primary su-icon-only) auquel on ajoute la classe su-play-pause. À l’intérieur de ce bouton, les 2 icônes sont ajoutées, avec chacune leur classe pour les identifier : su-icon-play et su-icon-pause.

<button class="su-button su-primary su-icon-only su-play-pause" data-sutoggleclass='{"klass":"su-play"}'>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
</button>

Inactif

Pour un bouton inactif, ajoutez l’attribut disabled au bouton.

<button class="su-button su-primary su-icon-only su-play-pause" data-sutoggleclass='{"klass":"su-play"}' disabled>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
</button>

Avec information temporelle

Dans certains cas, il peut être pratique d’utiliser un bouton donnant des informations temporelles (temps total du média, temps écoulé ou temps restant). Il faut alors ajouter au bouton et un <time datetime=""> contenant le temps affiché.

Comme pour les boutons avec icône, le pictogramme avant le texte de durée (la balise <time>) doit être séparé de celui-ci par une espace (ou un retour à la ligne).

<button class="su-button su-primary su-illustration-icon su-play-pause" data-sutoggleclass='{"klass":"su-play"}'>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
    <time datetime="4m">4 min</time>
</button>

En version secondaire

Il est possible de faire une version secondaire et petite de ce bouton avec les classes su-secondary et su-small.

<button class="su-button su-secondary su-small su-illustration-icon su-play-pause" data-sutoggleclass='{"klass":"su-play"}'>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
    <time datetime="4m">4 min</time>
</button>

Accessibilité

Afin d’ajouter de l’accessibilité à ce bouton, il est possible à minima d’ajouter l’attribut aria-description="Bouton de contrôle de la lecture".

<button class="su-button su-primary su-illustration-icon su-play-pause" data-sutoggleclass='{"klass":"su-play"}' aria-description="Bouton de contrôle de la lecture">
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
    <time datetime="4m">4 min</time>
</button>

Pour aller plus loin et indiquer l’action que fera le bouton, vous pouvez utiliser la fonction JS Toggleattribute pour changer la valeur de cet attribut avec par exemple : aria-description="Bouton de contrôle de la lecture : lire" data-sutoggleattribute='{"attr":"aria-description","val":"Bouton de contrôle de la lecture : lire","val2":"Bouton de contrôle de la lecture : pause"}.

<button class="su-button su-primary su-illustration-icon su-play-pause" data-sutoggleclass='{"klass":"su-play"}' aria-description="Bouton de contrôle de la lecture : lire" data-sutoggleattribute='{"attr":"aria-description","val":"Bouton de contrôle de la lecture : lire","val2":"Bouton de contrôle de la lecture : pause"}'>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
    <time datetime="4m">4 min</time>
</button>