Vincent Composieux – Développeur web Symfony / Zend

Vous souhaitez utiliser les balises <video> et <audio> apportées par HTML5 sur tous les navigateurs (oui oui, y compris les anciens) ?

La solution

Une solution vient d’être apportée en Javascript pour adapter tout ça sur les différents supports à l’adresse suivante : http://mediaelementjs.com/.

Ainsi, vous pourrez utiliser ces nouvelles balises HTML5 sans soucis de compatibilité sur les différents navigateurs.

Solutions de compatibilité utilisées pour les différents navigateurs

• Safari : HTML5 natif
• Chrome : HTML5 natif
• Internet Explorer 9 : HTML5 natif
• Internet Explorer 6,7,8 : Silverlight/Flash
• Firefox : Silverlight/Flash
• Opera : Silverlight/Flash
• iPhone, iPad : HTML5 natif
• Android : HTML5 natif

De plus, plus besoin de vous soucier du format de vidéo, le H.264 qui ne fonctionne pas sous Opéra et Firefox pourra désormais fonctionner car MediaElements.js s’occupe de modifier la source pour l’adapter en fonction des navigateurs.

À noter que la balise <video> peut contenir plusieurs éléments <source> qui ont comme source une vidéo de format différente afin que le navigateur puisse utiliser le format approprié.

Exemple d’utilisation

video src="fichier.mp4" type="video/mp4" width="640" height="360">
video width="640" height="360"
        source src="fichier.mp4" type="video/mp4"
        source src="fichier.ogg" type="video/ogg"
        source src="fichier.webm" type="video/webm"
/video

script
jQuery(document).ready(function($) {
        $('video').mediaelementplayer();
});
/script