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.

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 la classe su-with-time au bouton et un <span class="su-time"> contenant le temps affiché.

<button class="su-button su-primary su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
    <span class="su-time">2:35 min</span>
</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 su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
    <i class="su-icon su-icon-play">lecture</i>
    <i class="su-icon su-icon-pause">pause</i>
    <span class="su-time">2 min</span>
</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 su-with-time" 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>
    <span class="su-time">2:35 min</span>
</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 su-with-time" 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>
    <span class="su-time">2:35 min</span>
</button>