html5media — Les balises HTML5 audio et video sans contrainte

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

html5media — Les balises HTML5 audio et video sans contrainte

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 !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



13 commentaires pour “html5media — Les balises HTML5 audio et video sans contrainte”

  1. jmini dit :

    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…

  2. Bruno Bichet dit :

    @jmini — Je n’ai rien noté de spécial avec le lecteur audio dans Firefox, Chrome ou IE8. Tu utilise quel navigateur ?

  3. Jmini dit :

    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.

    • Bruno Bichet dit :

      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

  4. Gl0ubI dit :

    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 ?

    • Bruno Bichet dit :

      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é.

      • Cyril dit :

        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 ?

  5. Roma dit :

    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

    • js dit :

      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…).

  6. Shad dit :

    Merci pour cette news très utile ;) L’affichage est parfait en jouant avec le width et height.

    Encore merci à toi!

  7. fran6t dit :

    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.

  8. coco dit :

    Bonjour, j’ai integrer un audio dans ma page, mais je ne souhaite pas le lancer de suite… je souhaiterais masquer le controler et desactiver l’Autoplay, pour lancer l’audio manuellement au moment où une animation que j’ai intégré dans ma page est terminer.

    Est-ce possible, et si oui quel est l’instruciton ?

    Merci

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site