5568 sujets

Sémantique web et HTML

Balise vidéo ne fonctionnant pas sous FF

Bonjour.

Je suis en train de tester l'intégration de vidéos MP4 et j'ai essayé cette balise qui fonctionne très bien sous IE 9 mais pas du tout sous FF 4 ; les boutons de lecture/pause et la barre de progression ne s'affichent pas, j'ai juste un rectangle gris foncé avec en son milieu un X en gris clair.

<video width="640" height="480" controls="controls"><source src="videos/test.mp4" type="video/mp4" />

Merci.
FF ne comprend pas le mp4, juste le OGV pour la version 3.6 ou le webm pour la 4.

Dans ce billet, tu trouveras un exemple de vidéo html5 avec fallback en flash.

Ne pas oublier les entêtes http qui vont bien côté serveur. Smiley cligne 



<video height="300" width="400" controls="controls">
	<source src="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_h264.mp4" type="video/mp4"/>
	<source src="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_vp8.webm"  type="video/webm"/>

	<source src="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_theora.ogv"  type="video/ogg"/>

	<object type="application/x-shockwave-flash" data="http://pragmafilm.lombre.net/?pf=player_flv.swf" height="300" width="400">
		<param name="movie" value="http://pragmafilm.lombre.net/?pf=player_flv.swf" />
		<param name="wmode" value="transparent" />

		<param name="allowFullScreen" value="true" />
		
		<param name="FlashVars" value="flv=http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_h264.mp4&amp;width=400&amp;height=300&amp;margin=1&amp;showfullscreen=1&amp;showvolume=1&amp;showtime=1" />
		<a href="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_h264.mp4">Vidéo au format MP4</a> ou <a href="http://pragmafilm.lombre.net/public/blowup-images/cod2_sur_macbook_theora.ogv">Vidéo au format OGV</a>
	</object>
</video>
Nerva a écrit :
C'est justement à partir de ce document que j'ai commencé à tester... Smiley rolleyes

J'abhorre très sincèrement ce smiley Smiley rolleyes

Aurais-tu indiqué dans ton message initial le support de cet article pour tes tests...que cela n'aurait pas pour autant modifié ma réponse. Smiley rolleyes

Ta lecture n'a sans doute pas été suffisamment attentive (formats video, support navigateurs, interoperabilité,...) Smiley cligne
(plus sympa comme smiley, non ?)
Un approfondissement des connaissances du fonctionnement des navigateurs (support natif, plugin,...) devrait également te permettre de mener, de manière plus efficace, tes tests Smiley cligne

Très cordialement.
Si il faut multiplier les formats disponibles pour satisfaire tout le monde, bonjour l'espace occupé sur les serveurs !
Enfin bref, ça fonctionne avec le format WEBM et je vais m'arrêter à celui-ci, quitte à insérer un lien de téléchargement pour les navigateurs ne pouvant pas le lire.
Je suis d'accord avec Nerva, je ne comprend pas pourquoi le format des vidéos n'ont pas été standardisé comme HTML5...
Mais tu peux trés bien héberger tes vidéos et les appeler par les urls en fonction du navigateurs ^^
mini-truc a écrit :
Je suis d'accord avec Nerva, je ne comprend pas pourquoi le format des vidéos n'ont pas été standardisé comme HTML5...


Mais il y a des standards : h.264, webm, ogv… Ce n'est pas au w3c de graver dans le marbre le format vidéo à utiliser sur le web. D'autant plus que dans le futur d'autres formats plus performants verront le jour.

mini-truc a écrit :
Mais tu peux trés bien héberger tes vidéos et les appeler par les urls en fonction du navigateurs ^^


L'utilisation de la balise <video> combinée à <source> permet justement une lecture en fonction des capacités du navigateur. On peut même utiliser des queries.
Le gros problème se situe justement ici : il y a trop de standards, de formats et de containers pour des résultats de qualité équivalente (surtout pour des vidéos insérées sur le web dont la plupart sont de qualité déplorable). Déjà qu'on est bien emmerdé avec "chaque" éditeur qui veut défendre son produit, vantant des mérites que le concurrent n'a - forcément - pas, alors en plus, si il faut tenir compte des utilisateurs qui ne sont pas foutus de mettre à jour leur navigateur, où va-t-on... Smiley decu
Je ne sais pas vraiment comment en image le JPEG s'est imposé, qu'on ne vienne pas me dire qu'on n'aurait pas pu faire la même chose en audio et en vidéo...
C'est normal qui est de nouvelles technologies et que de nouveaux formats soit créés, mais HTML5 a été créé pour standardisé les balises etc ...
donc bon çà ne respecte pas entièrement ce principe, et je le mieux qui pourrait nous arriver serait que tous les navigateurs évoluent en même temps, traduise le html5, le css3, svg, et bien sur supporte tout format photo, vidéo et audio *-*

on a le droit de rêver Smiley smile
html5 n'est pas terminé et ne le sera pas avant quelques années pour certains de ses modules. Les fabricants de navigateurs avancent à leur rythme et ils ont implémenté déjà pas mal de choses.

Pour revenir à la vidéo, je ne vois pas où est le problème: si c'est un problème d'espace sur le serveur et/ou de bande passante on utilise un service externe (youtube, dailymotion, vid.ly, etc).

À terme, il ne devrait subsister que webm et mp4 (h.264).
Je pense juste qu'on a le droit d'avoir des avis partagés sur les navigateurs et sur html5... un forum c'est pour s’échanger les opinions non ?
Désolé de t'avoir pourri ton POST Nerva ^^
Heu… Faut pas le prendre mal comme ça, je ne suis pas fâché du tout et je ne cherche pas à te faire taire. Smiley lol

Désolé si le ton employé le laissait penser. Smiley cligne
Ah non je l'ai pas pris mal j'ai cru que tu te vexé justement donc j'ai préféré ne pas envenimé la chose Smiley smile
Alors j'ai fait un test avec les 4 formats en suivant le tutoriel (pour l'instant les fichiers sont en local) :

<video width="640" height="480" controls="controls">
	<source src="videos/test.mp4" type="video/mp4" />
	<source src="videos/test.webm" type="video/webm" />
	<source src="videos/test.ogg" type="video/ogg" />
	<object type="application/x-shockwave-flash" width="640" height="480" data="videos/test.flv">
		<param name="movie" value="videos/test.flv" />
		<param name="wmode" value="transparent" />
	</object> 
</video>


Ca ne fonctionne pas sous IE 8 ; j'ai un "blanc" de la hauteur de la vidéo...
Modifié par Nerva (20 Apr 2011 - 18:40)
Hello,

Deux conseils:
- Utiliser uniquement WebM (VP8) et MP4 (H264), soit deux fichiers au total. Les dernières versions des navigateurs lisent soit l'un, soit l'autre. Et pour les autres, on peut leur servir un lecteur Flash qui utilisera... le fichier MP4 (en attendant le support de WebM dans une future version de Flash).
- Côté HTML, je déclarerais uniquement l'élément VIDEO avec ses deux SOURCE. Et j'utiliserais un script JS qui 1) détecte l'absence de support natif et 2) si VIDEO (ou les formats utilisés) pas supporté, substitue l'élément VIDEO pour un lecteur Flash. On peut voir du côté de http://mediaelementjs.com/ ou http://videojs.com/ (croisés récemment, pas testés encore).
Sujet clos
Aller à