Chargement…
Lecteur Vidéo HTML5

Créer Un Lecteur Vidéo HTML5 Avec Video.js



Video.js est un plugin jQuery qui permet de créer un lecteur vidéo HTML5. c’est une librairie Javascript et CSS pour créer facilement un lecteur vidéo avec différents graphiques, responsive design adapté à tous les navigateurs et taille d’acran, des boutons de contrôle pour afficher la vidéo en mode plein écran, Ajouter des sous-titres… en plus, si le HTML5 ne marche pas, il utilise Flash comme alternative pour afficher le Lecteur.

Un Lecteur Vidéo HTML5 Avec Video.js

Lecteur Vidéo HTML5

Installation

L’installation de video.js ne prend que quelques secondes :

1- Inclure Video.js Javascript et CSS du Lecteur dans la Header de votre page :

Vous allez me dire que c’est préférable d’inclure les codes avant la /body de la page, mais video.js utilise HTML5 Shiv qui est nécessaire pour l’affichage du lecteur sur les anciennes versions d’Internet Explorer.

Vous pouvez télécharger Video.js directement à votre serveur et inclure les fichiers nécessaires :
<link href="//exemple.com/répertoire/to/video-js.css" rel="stylesheet">
<script src="//exemple.com/répertoire/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://exemple.com/répertoire/to/video-js.swf"
</script>
ou bien utiliser le lien CDN gratuit.

2- Ajouter la Vidéo

– L’attribut id doit être unique et propre à une seul vidéo dans la page.

– L’attribut Class se compose de deux Classes :

  • video-js : Applique le style relative au fonctionnement du Lecteur (Sous-Titres, Plein écran…)
  • vjs-default-skin : Applique le style et le graphique des boutons de Contrôle du Lecteur.. vous pouvez les modifier ou créer votre propre Design

Télécharger Code Source



Laisser un commentaire