Ciblage vidéo smartphone et Tablet

Bonjour tout le monde !

Je commence a franchement péter un plomb, je vous expose mon problème.
Je souhaite display une video en HTML5. Jusque là, rien de fou.
J'aimerais maintenant cibler les Low, medium et High résolution, c'st-à-dire smartphone, tablet et desktop, en distribuant 3 vidéos différentes selon la résolution.
Et cela, pour les 3 formats : MP4, OGV et Webm.

Du coup, me retrouve avec ... 9 sources différentes. Ok.

Je m'essaye à l'adaptation de chacune des vidéos sur iPhone, iPad et Desktop, et là... C'est la galère. Il ets a noté que je souhaite lire la vidéo.. Dès le début. Je sais qu'on ne peut pas (plus malgré le hack) lire directement une vidéo sur iPhone/iPad, d'où le fait que je display les controls pour le moment.

Voici mon code, complet pour la partie MP4 :

<video width="1024" height="576" id="video" controls poster="img/poster.jpg"> 
			    <source src="video/LD.mp4"  media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" type="video/mp4" />
				<source src="video/MD.mp4"  media="only screen and (min-device-width: 768px)" type="video/mp4" /> 
		    	<source src="video/HD.mp4"  type="video/mp4" />
		    	<source src="video/H264.webm"  type="video/webm" /> 
		    	<source src="video/H264.ogv"   type="video/ogg" />
	  	 	</video> 

Et mon soucis, c'est bien le ciblage avec l'attribut "media". Du moment que je met un

(min-device-width: 320px)

...ça foire, idem pour l'iPad ... Si je ne le met pas par contre, le bouton play apparaît, et je peux lancer la vidéo ...

Avez-vous déjà eu ce genre de soucis ?

Merci beaucoup !
Modifié par Dj_Danetag (23 Nov 2011 - 20:19)

Bon bah la solution semble simple : Il faut mettre les .mp4 du HD au LD, et ne faut pas mettre d'attributs media.
L'iPhone et l'iPad choisissant automatiquement la meilleure source adaptée parmis les sources proposés, il faut mettre en 1er la version HD pour les desktop.

Voila en espérant que ca en aide certain

La réponse précédente te donne la première direction vers laquelle te dirigé, mais d'expérience c'est loin d'être aussi simple.

Bien encoder ses vidéos est un calvaire, et s'assurer de permettre le playback, etc...

En pur html 5, je ne crois pas qu'il soit possible de servir des vidéos pour toutes les résolutions et appareils différents à l'heure où l'on se parle. Il faudra inévitablement passé par Javascript.

Voilà quelques sources:



// Informations diverses, notamment sur le formattage
http://diveintohtml5.info/video.html

// Bibliothèque de script et player
http://mediaelementjs.com/
http://videojs.com/

// Une petite aide si jamais
http://easyhtml5video.com/
http://sublimevideo.net/

Merci bien ! Pour le moment le problème est réglé, mais j'en est un autre : juste l'audio dans IE9, mais pas la vidéo .. :x