Les API multimédia et graphiques en HTML5, exemples avec <audio/>, <video/> et <canvas/>

Multimédia

Reprendre le code de l'exercice précédent.

Le but de cet exercice est d'utiliser les balises <audio> et <video>.

Question

Choisir un fichier son sur le site libre http://freemusicarchive.org/ et l'intégrer au premier article avec les commandes basiques (lecture, pause...).

Sur http://freemusicarchive.org/, le lien source d'un fichier est le même que le lien de téléchargement, de la forme :

https://freemusicarchive.org/music/download/[clé Hexa]

Un fichier audio.mp3 est mis à disposition en téléchargement ci-dessous pour faire des tests en localhost.

audio.mp3

Indice

Utiliser les attributs "src" et "controls".

Solution
1
<--! Ressource locale -->
2
<audio src="audio.mp3" controls>
3
Veuillez mettre à jour votre navigateur !
4
</audio>
5
<--! Ressource à distance -->
6
<audio src="https://freemusicarchive.org/music/download/179d4fd3a596779d670cd9792990bfbde09c3479" controls>
7
Veuillez mettre à jour votre navigateur !
8
</audio>

Question

Accéder au site http://download.blender.org/peach/bigbuckbunny_movies/ où est disponible le trailer de Big Buck Bunny. Intégrer le fichier 'big_buck_bunny_480p_stereo' au deuxième article en respectant les règles suivantes :

  • utilisation de sources multiples ;

  • on listera ces dernières dans l'ordre .mov, .avi puis .ogg ;

  • ne pas oublier de renseigner le MIME type ;

  • observer si le format est reconnu par le navigateur au fur et à mesure.

Un fichier video.mp4 est mis à disposition en téléchargement ci-dessous pour faire des tests en localhost sans multisource.

video.mp4

Indice
1
<source src="" type=""/>
Solution
1
<video controls>
2
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.avi" type="video/x-msvideo"/>
3
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov" type="video/quicktime"/>
4
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="audio/ogg"/>
5
    Veuillez mettre à jour votre navigateur !
6
</video>

Les navigateurs Chrome ou Mozilla devraient lire le fichier ogg (ou le fichier mp4 disponible en téléchargement) mais pas les fichiers avi ou mov.

PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC) Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)