5568 sujets

Sémantique web et HTML

Lecteur audio (html5) ne s'affiche pas (mais peut lire les fichiers)

bonjour le forum,

edit : je ne suis peut être pas dans le bon forum ... Smiley sweatdrop

je rencontre des difficultés avec IE9 et la balise audio html5. en bref les contrôles ne s'affichent pas (lecture, pause, etc.) je n'ai rien de rien ! par contre un clic droit sur l'emplacement du lecteur (invisible Smiley fache ) et j'ai bien les commandes "play/pause" via un menu contextuel, qui sont fonctionnelles car je peux écouter / stopper la lecture du fichier. Tous les autres navigateurs (modernes) sont ok, j'ai bien le lecteur qui s'affiche.
j'utilise le script de html5media pour le fall-back flash - qui fonctionne bien - et je l'ai même retiré pour essayer, mais ça ne change rien.
Une idée ?
je vous donnes les codes utilisés au cas où :
.htaccess
# Fichier audio
AddType audio/mp3 .mp3
AddType audio/ogg .ogg


html
<audio controls preload>
<source src="medias/France-bleue.mp3"></source>
<source src="medias/France-bleue.m4a"></source>
<source src="medias/France-bleue.ogg"></source>
</audio>


merci pour votre aide.
olivier
Modifié par o06 (11 Jan 2012 - 12:05)
Bonjour,

Pas trop d'idées. À tout hasard:
- Tests en local, sur un domaine de type réseau local (http://mondomaine/ sans TLD), ou en distant sur un domaine web?
- Quel est le mode de rendu de la page utilisé par IE9 (voir dans les Developer Tools)?
- Avec l'URL exacte du fichier MP3, est-ce que les en-têtes HTTP correspondant ont bien le type Mime demandé?
- Il me semble que ce serait audio/mpeg plutôt que audio/mp3. C'est ce que j'ai noté ici mais je ne sais plus quelle était la source...
- Si tu indiques un attribut type sur chaque élément SOURCE, ça permet en théorie au navigateur de ne pas chercher à télécharger tous les fichiers source pour en trouver un qu'il peut lire.
Modifié par fvsch (11 Jan 2012 - 23:04)
Merci pour la réponse fvsch,

en fait c'est un souci avec les règles css qui j'ai appliqué sur l'élément audio.
j'ai définit une largeur (width) et hauteur (height) et apparemment ça pose des soucis avec IE9. (qque soit le mode de rendu).
je pensais que l'on pouvait le styler sans contrainte ? (enfin dimensions et autres choses basiques)

ma balise audio est contenue dans un aside qui est en float:right avec une largeur définie.
si je ne met pas de règles sur l'élément audio, il dépasse de son conteneur (aside) sur tous les navigateurs. (sauf SAFARI ?) - si je mets une largeur à l'élément audio, tout rentre dans l'ordre - sauf avec IE 9 où le lecteur disparaît ... Smiley biggol
bon et bien encore une fois je ne comprends pas tout ... j'ai eu beau écumer le web en googlant rien de concret ... du coup je me retrouve avec un lecteur "minimaliste" sur IE 9 (?)

#pressroom aside audio {
	display:block;
	width:230px;
}


donne ça :

IE 9 :
upload/32111-IE9.jpg

FF :
upload/32111-FF.jpg

si vous savez comment avoir le (plus ou moins) même rendu pour le lecteur sur IE et les autres navigateurs je suis preneur.
merci
olivier.
salut le forum,

je déterre ce post, il faut apparemment éviter d'essayer d'imposer une taille à l'élément <audio> car IE9 affiche un player "simplifié" dans ce cas. (sur les autres navigateurs tout va bien)
il y a peut être une taille minimum, ou bien faut il que certains attributs soient renseignés, mais je n'ai pas eu le temps de tester.
si ça peut vous éviter de perdre du temps ...

je rebondis sur la dernière intervention de fvsch concernant html5media que j'utilise.
rien trouvé pour customiser le player (mal vu ?) par contre je me demandais s'il y avait moyen d'avoir la main sur les textes pour le dernier niveau du fallback "YOU HAVE NO FLASH ..." ? Qqun a t il pu "styler" et/ou "localiser" ces textes ?

merci.
o06 a écrit :
je me demandais s'il y avait moyen d'avoir la main sur les textes pour le dernier niveau du fallback

Si tu as déjà un contenu de fallback dans ton élément VIDEO, est-ce qu'il est conservé dans le DOM après l'initialisation de html5media?

Si ce n'est pas le cas, peut-être faire un rapport de bug du côté de https://github.com/etianen/html5media/issues

o06 a écrit :
Qqun a t il pu "styler" et/ou "localiser" ces textes ?

S'il s'agit juste de savoir où ils se trouvent dans le DOM et donc quel sélecteur CSS utiliser, tu peux regarder ça avec Firebug ou Web Inspector ou tout outil du genre (là c'est le B.A.-ba de l'intégration web Smiley cligne ).
pour le style, comme je n'ai rien trouvé à ce sujet, j'ai jeté un coup d'oeil rapide au javascript pour repérer les textes et trouvé le code HTML associé. une classe sur les balises audio et j'ai appliqué mes style.
(si ça peut aider, les éléments sont : h2, h3, p, a)

par contre pour la localisation ça va être chose … du coup comme maintenant je peux 'cibler' les éléments, peut être modifier en javascript (jQuery) leur contenu en fonction de la langue. pas génial mais à mon niveau je vois pas autrement. je reviendrais dire si ça marche.

fvsch a écrit :
là c'est le B.A.-ba de l'intégration web

et pan dans mes dents ! Smiley biggol
ps : j'ai - rapidement - essayé de voir, mais comme je ne pouvais "reproduire" le contexte qu'avec IE7 (XP) en désactivant le plugin flash, je n'arrivais avec ce navigateur qu'à voir le code source de la page sans "interprétation". enfin c'est comme ça que je l'explique car la source affichée par IE donnait le code html de base avec la balise audio. (sans les textes).
Modifié par o06 (28 Jan 2012 - 13:47)
Bonjour

J'utilise aussi html5media pour des vidéos et de l'audio et j'ai remarqué ce problème pour IE9, c'est effectivement une question de taille.
Html5media "utilise" Flowplayer comme alternative, pour le customiser : -http://flowplayer.org/demos/index.html
Pour programmer ses contrôles : -http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/, -http://www.pearson.fr/resources/titles/27440100184860/extras/2521_chap05.pdf
Sujet clos
Aller à