1- Introduction
Le but de cet article est de montrer comment réaliser un lecteur multimédia
( lecteur audio,vidéo) en profitant des nouvelles fonctionnalités introduites par HTML5.
Donc si vous êtes ici pour un truc avec flash, vous êtes au mauvais endroit.
Ceci dit allons tout droit au but.
2- A savoir
- Html5 est doté de fonctionnalités permettant de lire de la vidéo et de l'audio sans avoir recours
à des plugins externes.
- Tous les navigateurs ne peuvent pas lire tous les formats audio ou vidéo, donc pensez toujours
à mettre à disposition, plusieurs formats du même fichier, pour assurer un maximum
de compatibilité, avec tous les navigateurs.
a- Matériaux
Bon pour profiter au mieux de cet article vous aurez besoin de certains matériels.
- Créer un dossier
- Créer un fichier page.html et un fichier style.css
- Copier un fichier audio au format de votre choix, mp3 de préférence
et nommez-le morceau.mp3. Faites de même avec un fichier video et nommez-le video.mp4
- Et enfin créez un fichier script.js qui contiendra notre code javascript.
- Utiliser le navigateur Chrome de préférence.
b- Code de base.
<!doctype html>
<html lang="fr"> <head> <meta charset="utf-8"> <title>Mon lecteur multimedia</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body>
<!-- Le reste du contenu -->
</body>
</html>
4- Lecteur Audio
Le code minimal qu'il faut pour avoir un lecteur audio dans le navigateur est le suivant:
<audio id="player" src="morceau.mp3" controls><audio>
Ou ce code plus complet:
<audio id="player" controls>
<source src="morceau.mp3" ></source>
<source src="morceau.ogg" ></source
</audio>
dans le cas on a plusieurs formats de sons à mettre à disposition des utilisateurs, selon les
capacités de chaque navigateur.
La balise <audio> a des attributs comme:
- controls : qui permet d'afficher les boutons de contrôle du lecteur, i.e PAUSE, PLAY, STOP,
etc. Il n'est pas obligatoire mais si vous décidez de vous en passer, vous devrez mettre
vos propre boutons et implémenter leur fonctionnement avec javascript.
- preload : qui permet de savoir si le navigateur doit précharger le son.
-
uniquement les métadonnées ou rien du tout.
sur votre site.
- loop : Pour savoir si la musique doit être jouée en boucle ou non.
- autoplay : Pour lancer la musique dès que la page se charge.
- width: Pour specifier la largeur du lecteur.
Selon les navigateurs, votre lecteur devrait ressembler à ceci:
5- Lecteur video
L'insertion d'un element vidéo se fait de la meme façon, ou presque de la mème façon
la balise <audio> et <video> hérite du meme composant HtmlMediaElement.
Bref pour inserer une video le code minimal de base est :
<video id="player" src="video.mp4" controls><video>
Ou ce code plus complet:
<video id="player" controls>
<source src="video.mp4" ></source>
<source src="video.webm" ></source>
</video>
L'élément vidéo a le memes attributs que l'élément <audio> plus deux autres attributs que sont:
- height: Pour spécifier la hauteur de la vidéo
- poster: l'image par défaut qui s'affiche avant la lecture de la vidéo. Vous pouvez faire
vous-même une capture d'une image significative de la vidéo .
6- Quelques compatibilités audio et video
- Audio
- Video
4- Lecteur Audio
Le code minimal qu'il faut pour avoir un lecteur audio dans le navigateur est le suivant:
<audio id="player" src="morceau.mp3" controls><audio>
Ou ce code plus complet:
<audio id="player" controls>
<source src="morceau.mp3" ></source>
<source src="morceau.ogg" ></source
</audio>
dans le cas on a plusieurs formats de sons à mettre à disposition des utilisateurs, selon les
capacités de chaque navigateur.
La balise <audio> a des attributs comme:
- controls : qui permet d'afficher les boutons de contrôle du lecteur, i.e PAUSE, PLAY, STOP,
etc. Il n'est pas obligatoire mais si vous décidez de vous en passer, vous devrez mettre
vos propre boutons et implémenter leur fonctionnement avec javascript.
- preload : qui permet de savoir si le navigateur doit précharger le son.
-
auto (par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
- metadata : charge uniquement les métadonnées (durée, etc.).
- none : pas de préchargement. Utile pour économiser la bande passante sur votre site.
- loop : Pour savoir si la musique doit être jouée en boucle ou non.
- autoplay : Pour lancer la musique dès que la page se charge.
- width: Pour specifier la largeur du lecteur.
Selon les navigateurs, votre lecteur devrait ressembler à ceci:
5- Lecteur video
L'insertion d'un element vidéo se fait de la meme façon, ou presque de la mème façon
la balise <audio> et <video> hérite du meme composant HtmlMediaElement.
Bref pour inserer une video le code minimal de base est :
<video id="player" src="video.mp4" controls><video>
Ou ce code plus complet:
<video id="player" controls>
<source src="video.mp4" ></source>
<source src="video.webm" ></source>
</video>
L'élément vidéo a le memes attributs que l'élément <audio> plus deux autres attributs que sont:
- height: Pour spécifier la hauteur de la vidéo
- poster: l'image par défaut qui s'affiche avant la lecture de la vidéo. Vous pouvez faire
vous-même une capture d'une image significative de la vidéo .
6- Quelques compatibilités audio et video
- Audio
- Video
Aucun commentaire:
Enregistrer un commentaire
Ajouter un commentaire