Ideálne vloženie flashu do (x)html

Zobrazuje flash/activex objekt poriadne v IE, FF, Safari, Chrome, Opera. Poskladal som to kvôli tomu, že som sa stretával s častými otázkami ako vložiť flash, tak aby sa bez problému zobrazil vo všetkých prehliadačoch. Z nejakého dôvodu to totiž haprovalo v IE a niekedy v Opere. Dlhé roky vynikajúce a odporúčané riešenie na Latrine je už teda zastaralé a je čas na nové riešenie.

Kód: Vybrať všetko

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Vloženie Flashu do stránky</title>
    <!--
      Súbor swfobject.js je potrebný pre správne vloženie
      a zobrazenie flashu za pomocoi JavaScriptu
    -->
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="flash-identifikator">
      <!--
        Flash sa pomocou JavaScriptu vloží a zobrazí v DIVe (alebo inom blokovom elemente),
        ktorý musí mať nastavený identifikátor ID
      -->
      <script type="text/javascript">
          // <![CDATA[
          var cesta = "subor.swf";
          swfobject.embedSWF(cesta, "flash-identifikator", "320", "240", "10", cesta, null, null); 
          // ]] >  
      </script>
      <!--
        Ak má užívateľ vypnutý JavaScript,
        zobrazí sa mu flash bez pomoci JS ale pre jeho aktiváciu
        naň musí užívateľ najprv kliknúť (výnimka je prehliadač Firefox)
      -->
      <object type="application/x-shockwave-flash" data="subor.swf" width="320" height="240">
        <param name="movie" value="subor.swf">
        <!--
          Alternatívny obsah v prípade, že má užívateľ vypnutý alebo nenainštalovaný flash
        -->
        <p>
            Toto je alternatívny obsah a môže obsahovať čokoľvek. Napríklad obrázok
            <img src="bez-flashu.jpg" width="320" height="240" alt="Alternatívny obrázok" title="Nemáte zapnutý alebo nainštalovaný Flash player.">
        </p>
      </object>
    </div>
  </body>
</html>

(Validoval som to aj týmto validátorom lebo oficiálny W3C validátor nenájde chybu ani v nevalidnom kóde, mali by ho už opraviť)

HTML 4.01 Transitional

Kód: Vybrať všetko

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

: w3c html4 T.png (1.53 KiB) 1992 zobrazení

Zdrojový kód:

Spoiler

Kód: Vybrať všetko

    <div id="flash-identifikator">
      <!--
        Flash sa pomocou JavaScriptu vloží a zobrazí v DIVe (alebo inom blokovom elemente),
        ktorý musí mať nastavený identifikátor ID
      -->
      <script type="text/javascript">
          // <![CDATA[
          var cesta = "subor.swf";
          swfobject.embedSWF(cesta, "flash-identifikator", "320", "240", "10", cesta, null, null); 
          // ]] >  
      </script>
      <!--
        Ak má užívateľ vypnutý JavaScript,
        zobrazí sa mu flash bez pomoci JS ale pre jeho aktiváciu
        naň musí užívateľ najprv kliknúť (výnimka je prehliadač Firefox)
      -->
      <object type="application/x-shockwave-flash" data="subor.swf" width="320" height="240">
        <param name="movie" value="subor.swf">
        <!--
          Alternatívny obsah v prípade, že má užívateľ vypnutý alebo nenainštalovaný flash
        -->
        <p>
            Toto je alternatívny obsah a môže obsahovať čokoľvek. Napríklad obrázok
            <img src="bez-flashu.jpg" width="320" height="240" alt="Alternatívny obrázok" title="Nemáte zapnutý alebo nainštalovaný Flash player.">
        </p>
      </object>
    </div>

HTML 5

Kód: Vybrať všetko

<!doctype html>

: w3c html5.png (1.31 KiB) 1992 zobrazení

: webylon html5.png (2.21 KiB) 1992 zobrazení

Zdrojový kód:

Spoiler

Kód: Vybrať všetko

    <div id="flash-identifikator">
      <!--
        Flash sa pomocou JavaScriptu vloží a zobrazí v DIVe (alebo inom blokovom elemente),
        ktorý musí mať nastavený identifikátor ID
      -->
      <script type="text/javascript">
          // <![CDATA[
          var cesta = "subor.swf";
          swfobject.embedSWF(cesta, "flash-identifikator", "320", "240", "10", cesta, null, null); 
          // ]] >  
      </script>
      <!--
        Ak má užívateľ vypnutý JavaScript,
        zobrazí sa mu flash bez pomoci JS ale pre jeho aktiváciu
        naň musí užívateľ najprv kliknúť (výnimka je prehliadač Firefox)
      -->
      <object type="application/x-shockwave-flash" data="subor.swf" width="320" height="240">
        <param name="movie" value="subor.swf">
        <!--
          Alternatívny obsah v prípade, že má užívateľ vypnutý alebo nenainštalovaný flash
        -->
        <p>
            Toto je alternatívny obsah a môže obsahovať čokoľvek. Napríklad obrázok
            <img src="bez-flashu.jpg" width="320" height="240" alt="Alternatívny obrázok" title="Nemáte zapnutý alebo nainštalovaný Flash player.">
        </p>
      </object>
    </div>

XHTML 1.0 Transitional - Len je potrebné odstrániť z JavaScriptu pre vloženie flashu // <![CDATA[ a // ]] >

Kód: Vybrať všetko

<?xml version="1.0" encoding="utf-8"?>
<!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" dir="ltr" lang="sk-SK" xml:lang="sk-SK">

: w3c xhtml T.png (1.6 KiB) 1992 zobrazení

Zdrojový kód:

Spoiler

Kód: Vybrať všetko

      <div id="flash-identifikator">
      <!--
        Flash sa pomocou JavaScriptu vloží a zobrazí v DIVe (alebo inom blokovom elemente),
        ktorý musí mať nastavený identifikátor ID
      -->
      <script type="text/javascript">
          var cesta = "subor.swf";
          swfobject.embedSWF(cesta, "flash-identifikator", "320", "240", "10", cesta, null, null); 
      </script>
      <!--
        Ak má užívateľ vypnutý JavaScript,
        zobrazí sa mu flash bez pomoci JS ale pre jeho aktiváciu
        naň musí užívateľ najprv kliknúť (výnimka je prehliadač Firefox)
      -->
      <object type="application/x-shockwave-flash" data="subor.swf" width="320" height="240">
        <param name="movie" value="subor.swf"/>
        <!--
          Alternatívny obsah v prípade, že má užívateľ vypnutý alebo nenainštalovaný flash
        -->
        <p>
            Toto je alternatívny obsah a môže obsahovať čokoľvek. Napríklad obrázok
            <img src="bez-flashu.jpg" width="320" height="240" alt="Alternatívny obrázok" title="Nemáte zapnutý alebo nainštalovaný Flash player."/>
        </p>
      </object>
    </div>

XHTML 1.0 Strict - Len je potrebné odstrániť z JavaScriptu pre vloženie flashu // <![CDATA[ a // ]] >

Kód: Vybrať všetko

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="sk-SK" xml:lang="sk-SK">

: w3c xhtml S.png (1.55 KiB) 1992 zobrazení

: webylon xhtml S.png (2.88 KiB) 1992 zobrazení

Zdrojový kód:

Spoiler

Kód: Vybrať všetko

      <div id="flash-identifikator">
      <!--
        Flash sa pomocou JavaScriptu vloží a zobrazí v DIVe (alebo inom blokovom elemente),
        ktorý musí mať nastavený identifikátor ID
      -->
      <script type="text/javascript">
          var cesta = "subor.swf";
          swfobject.embedSWF(cesta, "flash-identifikator", "320", "240", "10", cesta, null, null); 
      </script>
      <!--
        Ak má užívateľ vypnutý JavaScript,
        zobrazí sa mu flash bez pomoci JS ale pre jeho aktiváciu
        naň musí užívateľ najprv kliknúť (výnimka je prehliadač Firefox)
      -->
      <object type="application/x-shockwave-flash" data="subor.swf" width="320" height="240">
        <param name="movie" value="subor.swf"/>
        <!--
          Alternatívny obsah v prípade, že má užívateľ vypnutý alebo nenainštalovaný flash
        -->
        <p>
            Toto je alternatívny obsah a môže obsahovať čokoľvek. Napríklad obrázok
            <img src="bez-flashu.jpg" width="320" height="240" alt="Alternatívny obrázok" title="Nemáte zapnutý alebo nainštalovaný Flash player."/>
        </p>
      </object>
    </div>

Pre iné doctype som to netestoval ale nemalo by to byť o nič horšie. (Aj keď na 100% validite nikdy nezáleží a nemá to vplyv ani na vykreslenie v prehliadači ani na vyhľadávanie. Validátor rozoberá dokument úplne inak ako cieľové zariadenie - prehliadač. Pri nevalídnom XHTML je prehliadačom rozoberaný pomocou HTML parsera.)

Ostatné atribúty ako priehľadnosť alebo zablokovanie kontextového menu sa dajú dohľadať aj pomocou googlu.

Užívajte v zdravý.

len som to prebehol, ale nie je to klasické vloženie cez swfobject aké sa používa už dlho?

Na začiatku píšem, že som to poskladal. (Aj funkcie v PHP skladáš z existujúcich príkazov, nevymýšľaš nové)

Je to navrhnuté tak, že sa primárne flash vloží pomocou swfobject, ak má užívateľ vypnutý JS, tak sa flash zobrazí pomocou object (tu je zmena lebo latrine uvádza úplne iný - dlhší - kód, ktorý má problém v dnešných prehliadačoch). Ja som sem nedal iba kód, ktorý opravuje tú chybu (upravený object) ale dal som sem rovno hotové riešenie, ktoré by sa malo používať ale robí to málo ľudí.

//autoeditácia príspevku (30 Dec 2013, 23:04)
Vloženie Youtube prehrávača do stránky

Ak ste niekedy potrebovali vložiť YT prehrávač do stránky použili ste vygenerovaný HTML, ktorý poskytuje priamo Youtube. YT normálne generuje iframe, v ktorom sa zobrazuje prehrávač priamo z YT stránky a to kvôli tomu, že ak nemá návštevník vašej stránky zapnutý alebo prítomný flash player zobrazí sa mu HTML5 náhrada (ak to jeho prehliadač podporuje). S iframe je ale jeden dosť veľký problém v prípade, že chceme v stránke s daným prehrávačom pohybovať. V osy X a Y to ide hravo, ale čo v prípade, keď mi prehrávač prekrýva napr. rozbaľovacie menu? Nastavením z-index nevyriešime nič. Flash player je totiž defaultne vždy nadradený. Riešením je použiť kombináciu klasického object tagu (viď. vyššie) a iframe pre prípad zobrazenia HTML5 varianty.

Kód: Vybrať všetko

<object type="application/x-shockwave-flash" data="//www.youtube.com/v/{kód videa}" width="560" height="315">
    <param name="movie" value="//www.youtube.com/v/{kód videa}">
    <param name="wmode" value="opaque">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <p>
        <iframe src="//www.youtube.com/embed/{kód videa}"></iframe>
    </p>
</object>&nbsp;

<param name="wmode" value="opaque"> zaručí, že flash objekt začne reagovať na z-index. Tento atribút sa bohužiaľ nedá zadať pomocou iframe.

//autoeditácia príspevku (06 Jan 2014, 13:17)
Takže nakoniec predsa len existuje možnosť zadať parameter wmode=opaque pomocou iframe.

Kód: Vybrať všetko

<iframe src="http://www.youtube.com/embed/{kód videa}?wmode=opaque" width="560" height="315" frameborder="0"></iframe>

Ideálne vloženie flashu do (x)html

Ideálne vloženie flashu do (x)html

Re: Najfunkčnejší spôsob vloženia flashu do web stránky

Re: Najfunkčnejší spôsob vloženia flashu do web stránky