Detekujeme verzi flash pluginu JavaScriptem

V dnešní době naštěstí jen málokoho napadne vytvořit celou prezentaci pomocí flashe, přesto však má flash nezastupitelné místo pro zpestření a okořenění stránek. V tomto článku si ukážeme, jak můžeme bez obav používat flash a přitom zobrazit uživateli automaticky náhradní obrázek v případě, že z nějakého důvodu není k dispozici flash plugin požadované verze.

Výsledná aplikace podporuje myšlenku netechnokratického a bezbariérového webu nejen pro chudé – uživatel nemusí řešit více či méně poťouchlé volby jako "Flash verze / HTML verze", "Lepší verze / horší verze".

Pro demonstraci jsem si vypůjčil efektní flash z článku o tvorbě hry. Alternativní obrázek jsem vyrobil jednoduše pomocí PrintScreen. Ukázka vyžaduje plugin verze 5, není-li k dispozici, zobrazí se alternativní obrázek. Prohlédněte si ukázku – vyzkoušejte ji v různých prohlížečích a zkoušejte vypínat/zapínat JavaScript a Flash plugin.

Hledáním na internetu a prozkoumáním originálního Macromedia Flash MX Detection Kit vznikl následující skript, který provede detekci pluginu a jeho verze a to v různých prohlížečích a na různých platformách. Není-li plugin zjištěn, namísto kódu přehrávače je vygenerován tag alternativního obrázku. Alternativní obrázek je generován pro jistotu také do tagu noembed a noscript. Proti standardu není část noembed zanořena do embed – je to proto, že standardní umístění v řadě případů způsobuje pád prohlížeče (NN4, Opera 6) a takovou stránku není možné vůbec zobrazit, nestandardní umístění je kupodivu funkční. Jak je vidět, celý kód přehrávače nebo obrázku je generován až za běhu pomocí document.writeln(), což nemusí být pro každého úplně košer. Pokud však vyjdeme z předpokladu, že ti, kteří mají provozuschopný Flash plugin, mají i zapnutý JavaScript, je tato nevýhoda zanedbatelná. Pokud není k dispozici JavaScript, bohužel bude zobrazován pouze alternativní obrázek, přestože by flash jinak bylo možné zobrazit. Vkládání přehrávače jako pluginu pomocí object a embed je analogické s vkládáním přehrávače médií, proto zájemce o detalní vysvětlení atributů classid, codebase, pluginspage a na něj odkazuji.

<script type="text/javascript">
<!–
var agt = navigator.userAgent.toLowerCase();
var ie = (agt.indexOf("msie") != -1);
var ns = (navigator.appName.indexOf("Netscape") != -1) || (navigator.appName.indexOf("Opera") != -1);
var win = ((agt.indexOf("win")!=-1) || (agt.indexOf("32bit")!=-1));
var mac = (agt.indexOf("mac")!=-1);
var rqversion = 5; // požadovaná verze pluginu
var result = false;
if (ie && win)
{
  document.writeln(‚<script type="text/vbscript">‘);
  document.writeln(‚ On Error Resume Next‘);
  document.writeln(‚ result = IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.’+rqversion+’"))‘);
  document.writeln(‚</script>‘);
}
if (ns || !win)
{
  if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)
  {
    if (navigator.plugins && navigator.plugins["Shockwave Flash"] && (versionIndex = navigator.plugins["Shockwave Flash"].description.indexOf(".")) != – 1)
    {
      var versionString = navigator.plugins["Shockwave Flash"].description.substring(versionIndex-1,versionIndex);
      versionIndex = parseInt( versionString );
      if ( versionIndex >= rqversion )
        result = true;
    }
  }
}
if (result)
{
  document.writeln(‚<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,0,0" width="200" height="200">‘);
  document.writeln(‚ <param name="movie" value="flash.swf" />‘);
  document.writeln(‚ <param name="src" value="flash.swf" />‘);
  document.writeln(‚ <param name="filename" value="flash.swf" />‘);
  document.writeln(‚ <param name="quality" value="high" />‘);
  document.writeln(‚ <param name="menu" value="false" />‘);
  document.writeln(‚ <param name="wmode" value="" />‘);
  document.writeln(‚ <param name="scale" value="showall" />‘);
  document.writeln(‚ <param name="salign" value="" />‘);
  document.writeln(‚ <param name="bgcolor" value="#FFCF00" />‘);
  document.writeln(‚ <embed pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="200"   src="flash.swf" movie="flash.swf" filename="flash.swf" quality="high" menu="false" scale="showall" salign="" wmode="" bgcolor="#FFCF00">‘);
  document.writeln(‚  </embed>‘);
  document.writeln(‚</object>‘);
  document.writeln(‚<noembed>‘);
  document.writeln(‚ <img src="alternate.gif" width="200" height="200" border="0" alt="" />‘);
  document.writeln(‚</noembed>‘);
}
else
{
  document.write(‚<img src="alternate.gif" width="200" height="200" border="0" alt="" />‘);
}
// –>
</script>
<noscript>
  <img src="alternate.gif" width="200" height="200" border="0" alt="" />
</noscript>

Skript začíná rozlišením typu prohlížeče a operačního systému – pokud jde o Internet Explorer a Windows, použije se ActiveX k pokusu o vytvoření instance objektu ShockwaveFlash.ShockwaveFlash.x (přičemž x je verze pluginu). Aby nemusel být skript roztříštěn na více části, je část pro práci s ActiveX ve VBScriptu také generována JavaScriptem pomocí document.writeln(). Pokud jde o ostatní prohlížeče a platformy, jsou k dispozici členové objektu navigator, který obsahuje údaje o přítomnosti pluginu a jeho verzi. Na závěr detekce je/není nastavená logická proměnná result, otestuje se a vygeneruje se buď kód přehrávače nebo tag obrázku. V kódu přehrávače vidíte některé parametry bez hodnoty – je to proto, že jsem se snažil podchytit většinu, které se v současné verzi 6 používají – ve vaší aplikaci by bylo lépe to ošetřit tak, aby nedefinované parametry nebyly vůbec generovány, přestože to funkčně nijak nevadí.

Detekci jsem zkoušel v IE5, IE6,NN4,NN6, Mozille 1.4, Opeře 7 – funguje spolehlivě všude, vyjma Opery, která i vpřípadě, že manuálně vypnete nainstalovaný Flash plugin, tvrdí, že plugin je k dispozici a ve stránce se tak neobjeví nic. Pokud však plugin nainstalován není, Opera zobrazí alternativní obrázek – spíše než o chybu zde jde zřejmě o vlastnost Opery. 

Jakkoli je ukázka funkční, pro opakované použití se takto připravený skript příliš nehodí – pro plné nasazení by bylo vhodnější upravit si skript do nějakého serverového prvku, který nám umožní snadno měnit url flashe i alternativního obrázku, také požadovanou verzi pluginu a rozměry nebo i další parametry. Například v PHP nebo ASP alespoň jako includovaný soubor, v ASP.NET jako serverový ovládací prvek (ukážeme si v dalším článku). Soubory ukázky si můžete stáhnout.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.