Disseny Web Usabilitat i Accesibilitat

Incloure un vídeo de youtube en una web i continuar validant amb XHTML strict

Tenim el bon costum de realitzar les pàgines complint les normes d’accessibilitat (mínim les automàtiques). Però moltes vegades ens trobem que ens cal incloure un vídeo de youtube a una pàgina web.

Si utilitzem el procediment típic (OBJECT and EMBED syntax | Flash)  per inserir els vídeos de youtube:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/ipzR9bhei_o"></param><embed src="https://www.youtube.com/v/ipzR9bhei_o" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

ens donarà 2 alertes: discarding unexpected </param> i <embeded> is not approved by W3C

Per sol·lucionar aquests problema tenim l’opció d’utilitzar el petit fitxer (3,2 KB) de javascript AC_RunActiveContent.js (Publishing Adobe Flash content using an Active Content HTML template )

<div id="video">
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" >AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
7,0,0,0','width','425','height','344','src','http://www.youtube.com/v/ipzR9bhei_o','quality','high',
'bgcolor','#00000','name','youtube','allowscriptaccess','sameDomain','pluginspage'
,'http://www.macromedia.com/go/getflashplayer','movie','http://www.youtube.com/v/ipzR9bhei_o' );</script>
</div>

Amb aquest codi ja la pàgina ja passaria les comprovacions de validació automàtica.

Si voleu anar més enllà, podeu utilitzar els controls de reproducció de youtube accessibles Accessible YouTube player controls.

Es tracta d’un javascript de 9,5 KB que permet controlar el reproductor amb el teclat. A més, la pàgina també passa els controls de validació automàtica.

<script type="text/javascript" src="bin/swfobject.js"> </script>
<script type="text/javascript">
(function(){
var a = {};
a.videoid = 'ZojdZGkojas';
a.width = '480';
a.height = '385';
a.duration = '4:15';
a.HTMLid = 'wrapper';
a.path = 'bin/flashcontrols.swf';
var flashvars = {HTMLid:a.HTMLid, videoid:a.videoid, height:a.height, width:a.width, duration:a.duration};
var params = {allowFullScreen: 'true'};
swfobject.embedSWF(a.path, a.HTMLid, a.width, a.height, '9', null, flashvars, params, null);
})();
</script>
<div id="wrapper"></div>

Deixa un comentari

L'adreça electrònica no es publicarà.