HTML5/H264: comment s'en sortir avec FF, IE et Safari

Bonjour à tous,

Je lutte ces derniers temps à essayer de comprendre comment jongler avec le format H264 et les différents navigateurs.

J'ai testé le tout simple Video for everybody qui en quelques lignes de code utilise l'HTML5 pour afficher de la vidéo et ça marche parfaitement.

J'ai inséré le code dans un widget texte d'un WordPress pour une vidéo MP4/H264 et ça marche à la perfection dans Safari, iPhone, etc.
Mais problème, en regardant sur Firefox la vidéo ne se charge pas et je n'ai qu'un fond noir avec une croix au milieu.

Je sais que Firefox gère le HTML5 mais pas le format H264. Le script est sensé passer au Flash au cas d'incompatibilité (ayant au préalable installé un flash video player) avec HTML5, mais qu'en est-il quand c'est le H264 qui coince? Pourquoi ne bascule-t-il pas non plus sur le player Flash?

Le basculement vers Flash ne se fait qu'en cas d'incompatibilité avec la balise <video> html5, dans le cas de IE par exemple.

Dans ton cas le player html5 est conservé mais comme d'après ce que tu décris tu ne proposes que le formet h264 qui n'est pas (encore?) pris en charge par Firefox, ça coince.
Le plus simple est d'encoder ta vidéo en OGG, qui est le format supporté par Firefox. Il faut alors proposer les deux formats vidéo (h264 et ogg) dans ta balise <video> via la balise <source> (je te renvoies à la documentation W3C ou à Google pour la syntaxe éxacte).

Merci pour ta réponse.

J'espérais éviter de faire un double de la vidéo en OGG mais apparemment j'y suis condamné!

Petit retour d'expérience...

Malgré la conversion de ma vidéo MP4 en OGG je n'arrive toujours pas à l'afficher sur Firefox...

Voici le code inséré

<video width="598" height="323" controls autoplay>
	<source src="http://monsite.net/wp-content/uploads/video_320p.mp4"  type="video/mp4" />
	<source src="http://monsite.net/wp-content/uploads/video_320p.ogv"  type="video/ogg" />
	<object width="598" height="323" type="application/x-shockwave-flash" data="http://site.net/mediaplayer/player.swf">
		<param name="movie" value="http://monsite.net/mediaplayer/player.swf" />
		<param name="flashvars" value="autostart=true&amp;controlbar=over&amp;image=http://monsite.net/poster.jpg&amp;file=http://monsite.net/wp-content/uploads/video_320p.mp4" />
		<img src="http://monsite.net/poster.jpg" width="598" height="323" alt="Rubber" title="No video playback capabilities, please download the video below" />
	</object>
</video>

Toujours en référence à ce qui est donné par Kroc Camen (Video for everybody).

Une idée?



PS: je me rends compte maintenant que mon sujet n'est peut-être pas à la bonne place dans les forums, n'hésitez pas à le bouger chers modérateurs et désolé !
Modifié par wbnet (05 Jan 2011 - 21:57)