HTML5 Video changement couleur selon navigateur

Bonjour,

J'ai exporté une video d'after effects que j'ai compréssé en .ogg/ .mp4/ .flv pour pouvoir être lu par les différents navigateurs. Ce qui marche très bien même sous ie8. Le problème est que le blanc de la video se transforme sur Firefox, Chrome et sur IE8. En effet, le blanc est rosé sur firefox/ Chrome et gris sous IE8. Sous safari le blanc est parfais.
Si je lis les videos des différents formats avec VLC, le blanc reste le même.

Comment est-ce possible que les navigateurs changent ce paramètre ?
Des idées....
Merci

Tu as une page en ligne ?

www.latoileculturelle.com

bizarrement le bouton entrez n'est pas positionné au bon endroit sous safari alors que c'est ok pour chrome et mozilla....

C'est la vidéo de la page page d'accueil ? Chez moi pas de problème sous Firefox et Chrome. Le blanc est bien blanc ( ).

oui la video de la page index à cette adresse ww.latoileculturelle.com

c'est vrai que c'est léger la différence... Mais sous IE 8/7 c'est une catastrophe le blanc est vraiment gris.
quand je regarde le code couleur avec firebug sous firefox. J'ai 255 255 255 pour le blanc de la page
et 254 254 254 pour le blanc de la video. Le navigateur change qd meme la couleur.

Est ce que le bouton entrez est bien placé à en bas à droite de la video ?
Modifié par maryann (02 Jun 2011 - 16:41)

oui la video de la page index à cette adresse ww.latoileculturelle.com

c'est vrai que c'est léger la différence... Mais sous IE 8/7 c'est une catastrophe le blanc est vraiment gris.
quand je regarde le code couleur avec firebug sous firefox. J'ai 255 255 255 pour le blanc de la page
et 254 254 254 pour le blanc de la video. Le navigateur change qd meme la couleur.

Est ce que le bouton entrez est bien placé à en bas à droite de la video ?

Moi j'ai 255, 254, 255. Autant dire que pour voir la différence avec 255, 255, 255 il faut s'accrocher. Le bouton est bien placé en bas à droite.

C'est à n'y rien comprendre...
Et sous IE 6/7/8 que voit-on une image... la video...

Si c'est la video elle doit etre grise et je ne comprends pas comment un navigateur peut transformer à ce point la couleur d'un fichier video...

Sous safari le bouton entrez est centré alors qu'en local il est ben placé en bas à droite. Bref encore un mystère !

Bonjour,
Il y a déjà un petit souci dans ton code :

<!--[if IE]>
	<img src="http://latoileculturelle.com/icones/logoIndexcomplet.png" width="650" id="logo"/>
	<!--Votre navigateur ne permet pas de lire la vidéo !--> 
<![endif]-->

Tu devrais enlever les <!-- et --> autour de la phrase "Votre navigateur ne permet pas de lire la vidéo ", car cela provoque un problème de syntaxe.

Je ne sais pas si ça suffira à résoudre le problème ...

En tout cas, chez moi, sur Firefox 4, l'image est OK!
Modifié par lddsoft (02 Jun 2011 - 18:17)

merci, voilà c'est changé.

Est-ce que l'image ou la video apparait bien sous IE avec le bouton entrez en plus???

Hélas pas de vidéo en vue sous IE.
Par contre l'avis "Votre navigateur ne permet pas de lire la vidéo !" apparaît juste avant le lien ENTREZ

Donc IE ne prend pas en compte la balise video car evidement IE ne comprend pas le HTML5. Forcément !

J'ai remplacé le code de l'image par le code de la video dans la balise if IE. Là on peut remarquer que le fond de la video est grisé et le bouton entrez n'est pas influencé par le CSS.

Savez vous pourquoi ?

Sur IE8, la vidéo passe bien et le bouton "entrez" est situé en bas à droite de la vidéo.

N.B.: le fond de la vidéo n'est pas grisé.
http://imageshack.us/photo/my-images/690/captureoni.png/
Modifié par lddsoft (02 Jun 2011 - 19:58)

Alors ça c'est incroyable !!! Ça change en fonction des PC sous IE 8...

Il y a quand des barres noires qui ne devraient pas y être, j'ai mis en height 500px ca devrait avoir disparu maintenant.

- Le bouton entrez est violet alors qu'il devrait rester noir, je ne comprends pas que le CSS ne soit pas appliqué sous IE.
- Savez-vous comment enlever la barre de lecture pour le lecture video sous IE ?


C'est quand meme une bonne nouvelle, merci pour l'aide et le screenshot

maryann a écrit :
- Le bouton entrez est violet alors qu'il devrait rester noir, je ne comprends pas que le CSS ne soit pas appliqué sous IE.

Cela dépend de l'état du bouton : actif, link, visited, hover ... au moment du screenshot!
Lorsque le lien a été cliqué, il est souvent violet par défaut dans les navigateurs. Sauf bien sûr si la valeur a été modifiée dans le CSS du script.

Pour la bande noire, on cherche...
Modifié par lddsoft (03 Jun 2011 - 15:47)

Ne devrais-tu pas placer le paramètre de transparence dans ta balise <object.... :

<param name="wmode" value="transparent" />

Tu connaissais ? => http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
Modifié par lddsoft (03 Jun 2011 - 15:48)

je suis d'accord pour le hover au moment du screenshot mais cela n'arrive que sur IE. Sur les autres navigateurs le bouton reste noir meme après le click ou en hover.

- Dans le CSS le bouton "entrez" a text-decoration et border-color = none et color=black. Donc normalement pas de changement de couleur possible....

- J'ai mis de nouveaux parametres pour masquer la barre de lecture. Cela marche t-il ?

- Meme en réduisant la height les barres noires sont toujours présentes ???

- Merci pour le lien, je le connaissais mais ça m'a permis de relire la partie sur la video pour IE et j'ai donc remplacé quelques lignes de codes.
Espérons que ca marche maintenant......

Désolé, mais ce n'est pas encore le cas ...

maryann a écrit :
je suis d'accord pour le hover au moment du screenshot mais cela n'arrive que sur IE. Sur les autres navigateurs le bouton reste noir meme après le click ou en hover.

Tout dépend du paramétrage des différents navigateurs.

maryann a écrit :
Donc normalement pas de changement de couleur possible....

Tout dépend de ton CSS... Le texte "ENTREZ" est compris dans une balise <nav qui elle-même est entre une balise <a. Le style pour <a prend sans doute le pas sur celui du <nav.

Sous IE, il n'y a plus de vidéo visible ! La source et le lecteur de la vidéo ne sont pas renseignés correctement dans <object ...
Tu devrais avoir qqch comme ceci (en adaptant) :

<object type="application/x-shockwave-flash"
        data="player_flv.swf" width="320" height="240">
  <param name="movie" value="player_flv.swf">
  <param name="FlashVars" value="flv=data/test.flv&amp;width=320&amp;height=240">
  <param name="wmode" value="transparent">
  alt : <a href="data/test.flv">test.flv</a>
</object>

Cet exemple utilise le lecteur flv de neolao
Sous Firefox 4 = nickel
Modifié par lddsoft (03 Jun 2011 - 20:35)

J'ai ajouté un a:hover a: visited a:link a:active avec decoration et color none. Ça devrait etre bon !!!!!

J'ai remis le code d'avant pour la video sous IE, est ce que ca marche sans barres noires et sans barre de lecture maintenant ?

merci de continuer de m'aider
Modifié par maryann (03 Jun 2011 - 20:39)