Les balises HTML5 `video` et `audio` permettent d’incorporer du son ou de la vidéo dans une page web aussi simplement que s’il s’agissait d’une image. Mais comme le roi et la reine ne le veulent pas tous les navigateurs ne prennent pas en charge ces charmantes nouveautés, html5media a eu la bonne idée de rendre possible l’utilisation des balises `audio` et `video` sans se soucier de la compatibilité : le script se charge de fournir un player Flash (flowplayer) pour les navigateurs à la traine !
Choisir le bon encodage
Les vidéos doivent être encodées dans les formats `h.264` (mp4) ou `Theora` (ogv) et les fichiers audio au format `mp3`, `AAC` (m4a) ou `Vorbis` (ogg). Voir la page sur les formats vidéo.
html5media.js
L’utilisation est assez simple, le script hébergé sur Google Code s’occupe de tout :
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
Utiliser video et audio
<video src="video.mp4" width="320" height="240" controls preload></video> <audio src="audio.mp3" controls preload></audio>
Pour les Jedi, il reste toujours la possibilité de télécharger les fichiers sources si le hotlinkin’ ne vous convient pas.
Bref : plus d’excuse pour ne pas plonger dans HTML5 !
Je viens d’essayer sur la page d’exemple…
http://static.etianen.com/html5media/
1/3 en haut du lecteur audio est coupé.
On peut toujours lire les chiffres qui affichent durée et avancement, mais tout juste…
@jmini — Je n’ai rien noté de spécial avec le lecteur audio dans Firefox, Chrome ou IE8. Tu utilise quel navigateur ?
Désolé pour cette réponse distraite. J’avais pensé qu’il fallait que je note ma configuration… et puis j’ai oublié.
Safari 4, Mac OS X, 10.5 (je ne suis plus chez moi, je ne peux pas te donner plus de détail)
Sinon je viens de tomber sur une news décrivant un lecteur de vidéo.
http://jilion.com/sublime/video
N’étant ni webdesigner, ni intégrateur HTML(5) j’aimerais ton avis d’expert.
A première vue ça se ressemble assez. Si on regarde le code source de l’exemple on trouve une balise video avec les formats .mov, .mp4 et .ogv
En fait, il s’agit d’une implémentation du Flowplayer, c’est ça ?
Ne serait-ce pas mieux (?) d’implémenter directement flowplayer ? ça n’engendre pas une sur-couche ?
Tout l’intérêt de html5media réside dans le fait qu’il permet d’utiliser normalement les balises audio et video. Le script se charge de détecter la prise en charge de ces balises : si elles sont absentes, c’est flowplayer qui est utilisé.
Je me pose la même question que Gl0ubI.
Je ne comprends pas l’intérêt de se script s’il se contente de « détecter la prise en charge de ces balises ».
Si on prends le cas de l’élément video, je peux très bien, après avoir spécifié les sources de ma vidéo (via la propriété src ou la balise source), inclure mon fallback flash (object).
Pour illustrer (et comme je ne pense pas qu’on puisse afficher du code ici) : http://www.bluishcoder.co.nz/2009/02/fallback-options-for-html5-video.html
Je veux dire que l’élément vidéo n’a pas besoin de script pour être interprété ou non.
Du coup ce fallback, je peux le créer direct avec flowplayer en jQuery, et qui a lui-même l’avantage de proposer une alternative si Flash n’est pas installé.
Donc le seul avantage que je trouve au script cité dans cet article, c’est le côté tout-en-un, qui évite de devoir configurer flowplayer.
Me trompe-je ?
Je voudrais mettre une musique lors de la navigation de mon site internet. Mais voilà:
Comment faire pour que la musique ne se « recharge » pas à chaque changement de page…
Merci à tous
Utilise des frames : Une très petite, juste assez pour avoir le lecteur audio, l’autre, qui prend tout le reste de l’écran, pour afficher le site. Vérifie bien que tous tes liens internes s’ouvrent dans le grand frame, tandis que les liens externes s’ouvrent dans la page entière (sinon ta musique continuera sur les autres sites, les gens ne vont pas aprécier…).
Merci pour cette news très utile 😉
L’affichage est parfait en jouant avec le width et height.
Encore merci à toi!
Merci pour ce billet, savez-vous si il est possible de gérer une liste de lecture ?
En gros au lieu de pointer un seul fichier .mp3 en fournir plusieurs et ensuite la balise déroule la lecture de tous les fichiers.
comment faire pour configurer flowplayer et avoir aussi une playlist ?