Les contrôles visuels et graphiques

Les éléments de contrôle du lecteur

Par défaut, le lecteur dispose d’un certains nombre d’éléments afin de contrôler la lecture d’un document audio ou vidéo ou simplement d’avoir des informations comme la durée par exemple. Ils apparaissent dans cet ordre :

• Un bouton lecture/pause ;
• Un élément textuel affichant le temps de lecture écoulé ;
• Une barre de progression de lecture (slider) indiquant où l’on se trouve dans la lecture, au clic sur celle-ci, le lecteur se déplace à l’endroit du clic, il est également possible de changer l’emplacement de lecture en faisant glisser la souris sur la barre (drag) au bon endroit ;
• Un élément textuel affichant le temps restant de lecture, au clic sur celui ci, il affichera alors la durée totale du document ;
• Un bouton activer la boucle : si activé le document se lira en boucle, sinon il s’arrêtera à la fin ;
• Un bouton pour passer en mode plein écran, uniquement sur les lecteurs vidéo [1]
• Une barre de progression (slider) de volume qui peut être horizontale ou verticale permettant de régler le volume sonore. Le volume est réglable soit en cliquant à l’endroit où nous souhaitons régler le volume soit en faisant glisser la souris sur la barre (drag) au bon endroit ;
• Un bouton de volume, permettant, lui, de mettre en sourdine ou d’activer le son du lecteur ;

Les contrôles à la souris du lecteur

En sus des actions au clic sur les boutons visibles de l’interface du lecteur, il est également possible d’effectuer d’autres actions grâce à la souris :

• Clic : en cliquant sur la vidéo ou sur le logo du son si disponible, le lecteur se mettra en lecture ou en pause en fonction de son état au moment du clic ;
• Molette (roulement) : en plaçant la souris sur l’espace utilisé par le média (hover), la molette de la souris n’exerce plus l’effet habituel de scroll de la page, mais diminue ou augmente le volume ;
• Déplacement de la souris : en mode plein écran d’une vidéo, le simple fait de déplacer la souris ajoute une class "hover" sur le conteneur de la vidéo. Dans le cas général cela peut être utilisé dans le cas ou en plein écran on enlève la barre de contrôle du lecteur et qu’on la remette qu’au moment où on déplace la souris (dépend du thème de lecteur utilisé) ;

Les contrôles claviers du lecteur

Plusieurs touches du clavier peuvent être utilisées pour contrôler le lecteur :

• la touche espace : permet de mettre en pause un média en cours de lecture, ou de reprendre sa lecture si il est déjà en pause ;
• les touches du pavé directionnels :
  • la touche "haut" : permet d’augmenter le volume de 10% sur un média en cours de lecture (si le volume n’est pas déjà à 100%) ;
  • la touche "bas" : permet de diminuer de 10% le volume sur un média en cours de lecture (si le volume n’est pas à 0) ;
  • la touche "gauche" : permet de se déplacer de 5% de la durée totale du média vers l’arrière ;
  • la touche "droite" : permet de se déplacer de 5% de la durée totale du média vers l’avant ;
• la touche "F" : si une vidéo est en cours de lecture, elle permet de la passer en mode plein écran (fullscreen), uniquement sur les vidéos ;
• la touche "L" : si un media est en cours de lecture, elle permet de la passer en mode "Boucle" (loop), ou de désactiver ce mode s’il est déjà en place ;
  la touche "esc" : lorsque l’on est en mode plein écran, elle permet de repasser dans le mode normal, uniquement sur les vidéos ;

Codes HTML complets

Ci-dessous sont des exemples complets de ce à quoi ressemble le code généré par la librairie Javascript.

L’ensemble des éléments de contrôle sont en HTML et donc pouvant être complètement stylés via CSS.

Un lecteur vidéo

Le code suivant est celui d’une vidéo en HTML5 complète avant intervention Javascript au niveau du lecteur :

Celui-ci correspond à celui après exécution du javascript :