Dewplayer accéssible aux aveugles via javascript

Question

sbayart

10 Sep 2009 à 10:16

Bonjour,

J'ai créé une page de type webradio dans laquelle on retrouve divers émission au format MP3.
Le contenu de cette page vient d'un fichier XML (arte.xml)
Les MP3 sont lus dans Dewplayer.
Les aveugles ne peuvent pas voir le flash, j'utilise donc le javascript fourni par Alsacréations qui permet d'avoir des boutons HTML pour diriger le flash Dewplayer.

Ca marche très bien pour 1 lecteur, mais dans ma page il y a plusieurs lecteurs.

Voici ma page en construction : http://www.mouvement-fixe.com/podcast/

Et voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("arte.xml", "rss/channel");
var ds2 = new Spry.Data.XMLDataSet("arte.xml", "rss/channel/item");
//-->
</script>

<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>
<div spry:region="ds1">
  <h1>{title}</h1>
  <p>{description}</p>
</div>

<div spry:region="ds2" spry:repeatchildren="ds2">

<script type="text/javascript">
function play() {
  var dewp = document.getElementById("dewplayer");
  if(dewp!=null) dewp.dewplay();
}
function stop() {
  var dewp = document.getElementById("dewplayer");
  if(dewp!=null) dewp.dewstop();
}
function pause() {
  var dewp = document.getElementById("dewplayer");
  if(dewp!=null) dewp.dewpause();
}
</script>

  <h2>{title}</h2>
  <p>{ds_RowID}</p>
  <p>{description} </p>
<div id="dewplayer_content">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="20" id="dewplayer" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="dewplayer.swf?{link}" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <param name="wmode" value="transparent" />
  <embed src="dewplayer.swf?{link}" wmode="transparent" quality="high" bgcolor="#ffffff" width="200" height="20" name="dewplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

  </object>
  </div>
 <br />
  
  <input type="button" onclick="play();" value="Play{ds_RowID}" />
  <input type="button" onclick="stop();" value="Stop{ds_RowID}" />
  <input type="button" onclick="pause();" value="Pause{ds_RowID}" />
  
  <br />

  <a href="{link}">Télécharger</a>
  
 <script type="text/javascript">
var flashvars = {
  mp3: "{link}"
};
var params = {
  wmode: "transparent"
};
var attributes = {
  id: "dewplayer"
};
swfobject.embedSWF("dewplayer.swf", "dewplayer_content", "200", "20", "9.0.0", false, flashvars, params, attributes);
</script>

</div>



</body>
</html>

Tout est ok sauf que je n'arrive pas à utiliser {ds_RowID} pour spécifier aux boutons avec quel Dewplayer il doit interagir.

Merci de m'aider Smiley smile

Sylvain

QuentinC

10 Sep 2009 à 10:33

Ce serait beaucoup plus simple si les mesures nécessaires étaient prises pour rendre ce flash accessible. C'est possible.

Dew si tu me lis, s'il te plaît, cesse d'utiliser le mode transparent et surtout donne des intitulés explicites aux boutons. Ce serait bien de rendre ton flash accessible, depuis le temps. Merci.

sbayart

10 Sep 2009 à 10:38

QuentinC a écrit :
Ce serait beaucoup plus simple si les mesures nécessaires étaient prises pour rendre ce flash accessible. C'est possible.

Dew si tu me lis, s'il te plaît, cesse d'utiliser le mode transparent et surtout donne des intitulés explicites aux boutons. Ce serait bien de rendre ton flash accessible, depuis le temps. Merci.

Même si je n'utilise pas le mode transparent le Dewplayer n'est pas visible par Jaws, enfin si mais Jaws dit juste qu'il y a du flash c'est tout.

Peut-être que si Dew donne des intitulés aux boutons cela pourrait marcher.
Ou si il me donne le .FLA du Dewplayer Smiley cligne

Sinon le javasript tourne bien et je peux utiliser cette solution mais j'ai ce petit problème expliquer dans mon premier post Smiley decu

Rodolphe

Administrateur

10 Sep 2009 à 12:35

Il est possible de cibler l'un ou l'autre des players grâce à son id, et à la fonction getElementById.

sbayart

10 Sep 2009 à 12:40

dew a écrit :
upload/2-dewplayerlabel.png

Il est possible de cibler l'un ou l'autre des players grâce à son id, et à la fonction getElementById.

ok mais j'ai besoin du .FLA pour ça non ?

Laurie-Anne

10 Sep 2009 à 12:58

sbayart a écrit :
ok mais j'ai besoin du .FLA pour ça non ?

Non, juste de rajouter id="identifiantUnique" aux codes qui appellent le Flash.

sbayart

10 Sep 2009 à 13:04

Laurie-Anne a écrit :

Non, juste de rajouter id="identifiantUnique" aux codes qui appellent le Flash.

Excusez moi je suis larguer Smiley ohwell

Qqun peut-il me donner le petit bout de code qui me manque ?
Ce serait super.

sbayart

10 Sep 2009 à 13:05

je sais donner un ID à mon flash mais comment dire à mon bouton d'agir sur ce dernier ?

Rodolphe

Administrateur

10 Sep 2009 à 15:48

sbayart a écrit :
Qqun peut-il me donner le petit bout de code qui me manque ?
Ce serait super.

Il est dans le premier post.
On voit bien les fonctions getElementById Smiley cligne

QuentinC

10 Sep 2009 à 16:28

Et Dew pendant que tu es là, est-ce que tu envisages de rendre ton player accessible ?
Ce serait bien, étant donné le relatif succès qu'il a déjà...

]quote]Même si je n'utilise pas le mode transparent le Dewplayer n'est pas visible par Jaws, enfin si mais Jaws dit juste qu'il y a du flash c'est tout.
Oui, il y a deux conditions : utiliser des boutons standards et définir des libellés intelligibles. J'ai trouvé un example de flash accessible qui marche avec jaws sur le site de freedom scientific l'autre jour, malheureusement sans les sources mais ça peut déjà donner une idée. Il présentait une vidéo de pub en anglais, mais on s'en fiche du contenu de cette vidéo. Je posterai le lien si je le retrouve.

Ericf

11 Sep 2009 à 01:01

Salut,

J'ai fait pour un site une animation Flash (avec les boutons lecture, pause et stop) qui a été validée par Accessiweb.
Si Dew veut de l'aide pour rendre son player accessible, je peux m'y coller Smiley cligne

Modifié par Ericf (11 Sep 2009 - 01:02)

sbayart

11 Sep 2009 à 14:30

dew a écrit :

Il est dans le premier post.
On voit bien les fonctions getElementById

Oups oui en effet.
Voilà j'ai modifié mon code en ajoutant des ID dans le premier JS, dans l'objet flash et dans le dernier JS.
Cela ne marche tjs pas, ça me semble normal car pour le moment les "button" ne savent pas sur quel flash (ID) ils doivent interagir.

Voici mon nouveau code.
Et encore merci à toutes et tous pour votre aide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("arte.xml", "rss/channel");
var ds2 = new Spry.Data.XMLDataSet("arte.xml", "rss/channel/item");
//-->
</script>

<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>
<div spry:region="ds1">
  <h1>{title}</h1>
  <p>{description}</p>
</div>

<div spry:region="ds2" spry:repeatchildren="ds2">

<script type="text/javascript">
function play() {
  var dewp = document.getElementById("{ds_RowID}");
  if(dewp!=null) dewp.dewplay();
}
function stop() {
  var dewp = document.getElementById("{ds_RowID}");
  if(dewp!=null) dewp.dewstop();
}
function pause() {
  var dewp = document.getElementById("{ds_RowID}");
  if(dewp!=null) dewp.dewpause();
}
</script>

  <h2>{title}</h2>
  <p>{ds_RowID}</p>
  <p>{description} </p>
<div id="dewplayer_content">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="20" id="{ds_RowID}" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="dewplayer.swf?{link}" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <param name="wmode" value="transparent" />
  <embed src="dewplayer.swf?{link}" wmode="transparent" quality="high" bgcolor="#ffffff" width="200" height="20" name="dewplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

  </object>
  </div>
 <br />
  
  <input type="button" onclick="play();" value="Play{ds_RowID}" />
  <input type="button" onclick="stop();" value="Stop{ds_RowID}" />
  <input type="button" onclick="pause();" value="Pause{ds_RowID}" />

  <br />

  <a href="{link}">Télécharger</a>
  
 <script type="text/javascript">
var flashvars = {
  mp3: "{link}"
};
var params = {
  wmode: "transparent"
};
var attributes = {
  id: "{ds_RowID}"
};
swfobject.embedSWF("dewplayer.swf", "dewplayer_content", "200", "20", "9.0.0", false, flashvars, params, attributes);
</script>

</div>



</body>
</html>

Sujet clos

Accessibilité du Web

Dewplayer accéssible aux aveugles via javascript