Dewplayer + balise <audio>

Salut à tous,

Je viens de réaliser un site (HTML5) pour une comédienne voix off.

J’ai donc eu besoin d’utiliser des "players" afin que les internautes puissent écouter les différentes pistes audio.

Dans un soucis de "compatibilité", et les navigateurs n’étant pas encore au point concernant la balise HTML5 <audio> j’ai opté pour un lecteur audio Flash (Dewplayer) (compatible IE7+8+9 … +FF …).

Je suis maintenant en train de travailler sur les Media Queries afin de proposer (au minimum) une version du site dégradable sur mobile. Or le lecteur Dewplayer ne s’affiche pas sur tous les mobiles, ce qui est normal (Flash).

Je cherche donc la meilleure solution afin de rester sur Flash par défaut, et de remplacer Flash par la balise <audio> pour les mobiles.

Ma première idée était d’utiliser les Média Queries via des (display :none;) en tout cas c’est ce que je vois de plus simple à faire. Mais pas très optimal en terme de poids de chargement sur certains navigateurs car le (display:none;) n'empêche en rien le chargement des éléments dans la page 'logiquement' ...

La solution serait donc de remplacer ma <section id='dewplayer'> par ma <section id='audio'> en passant par du JS voir PHP dans le cas où la taille de l’écran serait plus petite que 800 pixels de large et donc probable qu'il s'agisse d'un média mobile (Ce n’est qu’une idée …)

J’aimerais avoir votre avis sur la question, le but étant de proposer à tous les internautes la possibilité d’écouter ces titres …

Merci et bonne journée !
Modifié par yank (21 Sep 2011 - 13:41)

Florian_R a écrit :
Salut.
Tu prends le problème à l'envers.
En théorie, on met en place la balise audio avec ses contrôles optionnels en JS si nécessaire, et c'est le flash qui sert de fallback.
HS: C'était nécessaire de poster deux dois le sujet?

Merci pour la réponse.

As-tu un lien concernant ses contrôles optionnels en JS ?
Je vois ce que tu veux dire mais j'ai besoin d'un exemple pour comprendre le fonctionnement.

Sinon j'ai toujours trouvé cette solution mais cela oblige à dupliquer le site pour en faire une version spécialement mobile ... ce n'est pas le but final.


HS : Pour le post, je me suis aperçu après coup que la rubrique Web Mobile était peut être plus approprié que cette rubrique et je pensais que ce post allait être supprimé par un modo. D'ailleurs j'ai coché la case supprimer, mais apparemment cela n'envoie aucune alerte/demande de suppression ... je pensais
Vu que ce post est entamé si un modo peut supprimer le doublon dans Web Mobile ... et désolé pour le dérangement
Modifié par yank (21 Sep 2011 - 14:02)

yank a écrit :
As-tu un lien concernant ses contrôles optionnels en JS ?

J'en ai plein.

Florian_R a écrit :
J'en ai plein.

Merci

Testé sur plusieurs navigateurs, ne fonctionne pas sur FF5 et FF6.

<audio controls class="player">
<source src="mp3/audiotel.mp3"/>
<source src="mp3/audiotel.ogg"/>
<object type="application/x-shockwave-flash" data="mp3/dewplayer.swf" class="player" width="240" height="20" >
<param name="movie" value="mp3/dewplayer.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="mp3=mp3/audiotel.mp3" />
</object>
</audio>

Je ne vois pas comment faire mieux avec cette balise pour le moment, tant que les navigateurs ne seront pas unanimes sur le type de fichier à utiliser.

J'ai pourtant essayé plusieurs solutions, du html5media.js au htaccess et d'autres tournures html, il y a toujours un navigateur qui n'affiche ou ne lit pas cette balise.

Avec le Dewplayer, aucun soucis jusqu'à IE6.
C'est pourquoi je suis entièrement d'accord avec mon précédent lien posté.

Quelqu'un a t'il une solution fiable autre que celle-ci ?

EDIT : D'ailleurs sur Firefox ces liens ne fonctionnent pas non plus :

Audio1 - Audio2 - Video1 - Video2

Est-ce pareil de votre côté ?

Merci ...
Modifié par yank (21 Sep 2011 - 23:10)

Au final j'ai opté pour le Dewplayer Flash et la balise audio en fallback.

C'est le monde à l'envers ... pourquoi ce choix ?

Le support Flash est mieux pris en charge à l'heure actuelle sur la majorité des navigateurs et postes que HTML5. La lecture de ces pistes audio étant très importantes pour mon client, ce site étant son book professionel, j'ai préféré opter pour la sécurité plutôt que l'innovation entre guillements

Le jour où tous les navigateurs proposeront la prise en charge correcte de cette balise ainsi qu'un codec audio universel, la balise audio sera un vrai bonheur. En attendant, Flash dépanne encore bien.

<object type="application/x-shockwave-flash" data="mp3/dewplayer.swf" width="240" height="20">
<param name="movie" value="audio/dewplayer.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="mp3=audio/monson.mp3" />
<audio controls="controls" preload="none">
<source src="audio/monson.mp3" type="audio/mpeg"/>
<source src="audio/monson.ogg" type="audio/ogg"/>
</audio>
</object>
<a href="audio/monson.zip">Télécharger</a>

De cette façon le support est assuré sur tous les navigateurs, avec javascript activé ou non (bien que ça doit être de plus en plus rare ...), si pas flash, la balise html5 prend le relai si bien entendu le navigateur en est capable ...

Sur certains smartphones, le Dewplayer s'affiche mais reste utilisable tout de même, et pour tout ce qui concerne la gamme Apple qui n'affiche pas Flash, la balise audio prend le relais.

Une autre solution aurait été d'utiliser du Javascript pour afficher les players au lieu de Flash, mais cette solution ne m'a pas convaincu des masses, cette dernière ayant ces points faibles également.

Et pour finir pour les plus récalcitrants, reste le lien pour télécharger directement le son zippé.

yank a écrit :
Le jour où tous les navigateurs proposeront la prise en charge correcte de cette balise

À ma connaissance c'est le cas (IE9+, FF3.5+, etc.).

yank a écrit :
ainsi qu'un codec audio universel

Pour ça, il faudrait réformer le système de brevets logiciels américain, et c'est pas demain la veille. Alors encoder dans deux formats n'est pas idéal, mais c'est pas non plus très compliqué…

yank a écrit :
EDIT : D'ailleurs sur Firefox ces liens ne fonctionnent pas non plus :

Audio1 - Audio2 - Video1 - Video2

Est-ce pareil de votre côté ?

Aucun souci pour moi. Testé avec des versions récentes de Firefox, Chrome et Opera.

yank a écrit :

Merci pour ton retour mais me laisse encore plus perplexe du coup ...
Je suis sur FF7, Mac, le lecteur cherche mais ne lit rien.
Une idée ?

Même environnement, même version de navigateur et...aucun souci de lecture...