5568 sujets

Sémantique web et HTML

Html5: balise video et attribut poster

Bonjour
Sur un site en cours de développement, je dois intégrer des vidéos.
Pour la présentation de ces vidéos, j'utilise le slider Roundabout (jQuery).
Jusque là pas de soucis.
Le problème est sur "l'interprétation" de l'attribut 
poster=""
sur Safari et Chrome. (non, je n'ai pas encore dis tout le mal que je pense de IE, mais ça viendra)
FF et opera affichent parfaitement la vignette et la barre de contrôles
Chrome affiche (parfois! Smiley fache ) les vignettes mais de manière très très rapide, puis la 1ere image de la vidéo
Safari: N'affiche pas les vignettes...SAUF 1 qu'il affiche bien mais...PAS la barre de contrôles (vidéo inaccessible donc) Smiley biggol

Avez vous déjà rencontré de type de comportement, et comment l'avez vous résolu?
Pour confirmation: Si je ne met pas de 
poster=""
, est-ce bien la 1ere image de la vidéo qui s'affiche? (ce qui obligera mon client et ami à me fournir des films sans fondue noire au début...)


Voici le code html:


				<video controls="controls" id="dojo" poster="imag/roudabout/dojo1.jpg">
				<source src="videos/dojo/CLIPDEFIPHONE.m4v" type="video/mp4" />
				<source src="videos/dojo/CLIPDEFIPHONE.webmvp8.webm" type="video/webm" />
				<source src="videos/dojo/CLIPDEFIPHONE.theora.ogv" type="video/ogg" />
<p>Vous n'avez pas de navigateur moderne, ni Flash installé... </p>				
				</video>
												
				<video controls="controls" id="oldarra" poster="imag/roudabout/coeur.jpg">
				<source src="videos/aucoeur/AUCHOEURDELAVILLESITE.m4v" type="video/mp4" />
				<source src="videos/aucoeur/AUCHOEURDELAVILLESITE.webmvp8.webm" type="video/webm" />
				<source src="videos/aucoeur/AUCHOEURDELAVILLESITE.theora.ogv" type="video/ogg" />
<p>Vous n'avez pas de navigateur moderne, ni Flash installé... </p>				
				</video>
				
				
								
				<video controls="controls" id="asador" poster="imag/roudabout/asador-1.jpg">
				<source src="videos/asador/COURTMPEG4.m4v" type="video/mp4" />
				<source src="videos/asador/COURTMPEG4.webmvp8.webm" type="video/webm" />
				<source src="videos/asador/COURTMPEG4.theora.ogv" type="video/ogg" />
<p>Vous n'avez pas de navigateur moderne, ni Flash installé... </p>				
				</video>


Et un lien pour voir ça en ligne

D'avance merci pour vos avis.
Hello,

J'ai un rendu correct sur Firefox 4 et sur Chrome 10 (dernière version stable).
Effectivement il y a un problème sur Safari 5. Sans doute un bug qui sera corrigé prochainement. Pas sûr qu'il soit provoqué par quelque chose dans ton code, mais ça vaudrait le coup de tester:
- avec un seul élément SOURCE (vers le fichier "video/mp4" par exemple);
- avec un seul attribut src;
- et on pourra vérifier que les types MIME envoyés par le serveur pour l'image et les vidéos sont corrects.

En passant, «Vous n'avez pas de navigateur moderne, ni Flash installé...» comme texte alternatif c'est vraiment pas bon... Smiley rolleyes
Hello!
Bonjour et merci pour le retour Florent
Je viens de tester avec une seule source: même problème sus Safari (4.0.4) sous XP et Safari 4.1.2 sur mon portable Mac (pas de chrome sur mon dinosaure).
Mais sur XP, chrome 10 (je viens de le mettre à jour -bizarre d'ailleurs, il ne m'avait pas signalé de mise à jour dispo...), maintenant j'ai la vignette du 1er film (celui face au visiteur à l'arrivée sur la page) mais aucune sur les autres.... Smiley biggol
Le fichier htaccess que j'ai à la racine:
AddType audio/mp4 .m4a
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType video/ogg .ogv
AddType audio/ogg .oga
AddType video/webm .webm
AddType audio/mpeg .mp3


Bon, si c'est "matériel", à la limite je préfère....mais alors quid de mon autre question (si toi ou quelqu'un passant par là pouviez me le confirmer...): en cas d'absence de l'attribut 
poster=""
, c'est bien la 1ere image qui est affichée?

En attendant que tout ce beau monde veuille bien faire avancer le schmilblick, je crois que je vais abandonner cette possibilité, demander à mon client des vidéos avec une image dès le départ (pas de fondue noire)...et m'attaquer au problème iE (là, c'est plus grave, mais c'est un autre problème, donc éventuellement un autre post sur le forum. Et au passage, merci d'avoir déplacé ce post dans la bonne section du forum)

Pour le texte alternatif, tu as entièrement raison, c'était un peu "à la rage" comme dirait ma belle-fille, mais je tenais à rester courtois avec les utilisateurs de IE...
Smiley hinhin

Merci encore pour vos avis et conseils

[Edit]: tiens, un truc bizarre sur Chrome, les espaces entre les mots des textes sous la vidéo, sont remplacés par des signes étranges, genre ovni....déjà vu ça? Smiley eek
Modifié par boro64 (13 Mar 2011 - 14:54)
Sujet clos
Aller à