VT_S5B_mathduprat_VideoJS.mp4

Jan. 12, 2024
Duration: 00:05:14
Number of views 22
Addition in a playlist 0
Number of favorites 0

Pourquoi ai-je choisi ce sujet ?

J'ai choisi de présenter le framework VideoJS car il est au centre de mon travail dans le cadre de mon alternance.
De plus, il s'agit d'un outil graphique et ludique à faire découvrir, ce qui le rend parfaitement adapté à la réalisation d'une vidéo de vulgarisation.
Etant moi même consommateur de divertissement sur Youtube et Twitch je suis intéressé par l'immersion que les players vidéos peuvent fournir.
Ce framework permet donc d'imaginer et de créer sa propre vision de l'immersion vidéo.

 

Contenu de la vidéo.

Dans cette vidéo, je vous introduis à VideoJS et je présente des fonctionnalités de playlist permettant d'afficher des vidéos en lien avec la vidéo courante
et de timeline permettant de se rediriger vers des événements clés de la vidéo.
Toutes les informations liées à la vidéo sont stockées dans un fichier JSON propre à chaque vidéo.
La personnalisation du lecteur est peu abordée, car ce n'est pas l'aspect le plus intéressant ici.
Le résultat final du lecteur présenté est visible ici :


Qu'est-ce que VideoJS ?

VideoJS est une bibliothèque open source JavaScript qui permet de personnaliser et d'ajouter des fonctionnalités au lecteur HTML5 classique que l'on retrouve partout sur le web.
Il offre la possibilité d'intégrer des fonctionnalités telles que le chapitrage, la playlist, et bien d'autres.
Cette liberté de création est renforcée par la large communauté qui propose des plugins intégrant des fonctionnalités faciles à mettre en place,
ainsi que par la fréquence des mises à jour de l'outil.

  • Personnalisable : Video.js permet aux développeurs de personnaliser l'apparence et le comportement du lecteur vidéo en utilisant du HTML, du CSS et du JavaScript. Cela offre une grande flexibilité pour s'adapter aux besoins spécifiques d'un projet.

 

  • Prise en charge de plusieurs formats : Video.js prend en charge une variété de formats vidéo, y compris HTML5 video, mp4, M3u8, et d'autres, assurant une compatibilité avec différents navigateurs et appareils.

 

  • Contrôles Utilisateurs : Le lecteur vidéo intégré par Video.js inclut des contrôles utilisateur tels que la barre de progression, le bouton de lecture/pause, le contrôle du volume et d'autres fonctionnalités standard, facilitant la navigation et l'interaction pour les utilisateurs.

 

  •  Extensibilité : Video.js est extensible grâce à un système de plugins qui permet aux développeurs d'ajouter des fonctionnalités supplémentaires au lecteur vidéo de base. Cela permet d'étendre les capacités du lecteur en fonction des besoins spécifiques du projet.

 

  • Adaptabilité : La bibliothèque prend en charge la fonctionnalité de lecture adaptative, ce qui signifie qu'elle peut ajuster automatiquement la qualité de la vidéo en fonction de la bande passante disponible, garantissant une expérience de visionnage fluide.

 

  • Documentation complète : Video.js est accompagné d'une documentation détaillée, facilitant la compréhension et l'utilisation de la bibliothèque pour les développeurs.


Pourquoi ce sujet est-il intéressant ?

Dans une époque où le streaming et la vidéo occupent une place essentielle dans la consommation de divertissement, rivalisant même avec les médias traditionnels comme la télévision.
L'immersion des lecteurs vidéo est cruciale pour se différencier de la concurrence.
YouTube, pionnier dans le domaine, mène la tendance en ajoutant constamment de nouvelles fonctionnalités. VideoJS permet d'incorporer ces mêmes fonctionnalités et d'en créer de nouvelles en les intégrant nativement dans le site souhaité, se libérant ainsi de la contrainte de l'intégration du lecteur YouTube. C'est dans ce contexte que se joue l'enjeu de l'immersion du divertissement de demain.


Mon ressenti sur la vidéo.

Je suis plutôt satisfait de cette vidéo qui représente une petite introduction à VideoJS et à son intérêt.
J'aurais cependant aimé fournir un résultat plus professionnel mettant pleinement en avant les avantages de cet outil.
La richesse de cet outil rend difficile la présentation de nombreuses fonctionnalités en seulement 5 minutes.

 Infos

  • Added by: Mathias Duprat (mathduprat@u-bordeaux.fr)
  • Additional owner(s):
    • Pierre Ramet (pramet@u-bordeaux.fr)
  • Updated on: Jan. 12, 2024, 9:38 a.m.
  • Type: Tutorial
  • Main language: French