Depuis quelques années, intégrer une vidéo MP4 ou un fichier audio est devenu très simple grâce à l'HTML5, les balises video et audio étant comprises par la plupart des navigateurs. Découvrons Plyr, un plugin Javascript permettant d'ajouter quelques fonctionnalités sur le lecteur de base.

La philosophie de Plyr est simple : être un lecteur vidéo et audio le plus léger possible, accessible et paramétrable à souhait.

Parmi ses fonctionnalités, on retrouve :

  • un support complet des sous-titres et des lecteurs d'écran
  • très léger (10 Ko)
  • respectueux des balises HTML5
  • responsive
  • supporte la vidéo et l'audio
  • supporte l'intégration de vidéo Youtube et Vimeo
  • plein écran
  • aucune dépendance
  • ...

Pour les fans de Wordpress, un plugin est même disponible.

Installation

Vous pouvez installer Plyr de plusieurs manières :

  • NPM : npm install plyr
  • Bower : bower install plyr
  • A la main, en téléchargeant ces 3 fichiers : plyr.css, plyr.js, plyr.svg

Utilisation

L'intégration de vidéo ou d'audio est réalisé grâce aux balises HTML5 respectives.

<video poster="sample.png" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

Simple, non ? :)

Pour intégrer une vidéo Youtube ou Vimeo :

<div data-type="youtube" data-video-id="R2koFTfMtuY"></div>

<div data-type="vimeo" data-video-id="113009024"></div>

Ensuite, vous n'avez plus qu'à inclure les fichiers CSS et Javascript de Plyr. Pour ce dernier, placez-le en bas de page, avant la balise </body>.

Pour initialiser Plyr, utilisez ce code Javascript :

plyr.setup();

Une pléthore d'options est disponible. La liste complète est accessible sur la documentation.
Vous pouvez gérer la présence de certains contrôles (bouton lecture, plein écran, ...), autoriser la lecture automatique au chargement, etc...

plyr.setup({
  controls: ["play", "volume"],
  autoplay: true
});

Egalement, vous pouvez interagir avec Plyr en Javascript. Par exemple, pour mettre en pause la vidéo :

document.querySelectorAll(".player")[0].plyr.pause();

Les sous-titres (captions) sont prises en compte par Plyr. Il vous suffit d'utiliser la balise HTML5 <track> pour intégrer votre fichier WebVTT.

Conclusion

Très léger, facile à mettre en place et à paramétrer, Plyr est un excellent plugin pour uniformiser les lecteurs multimédia sur vos sites.