HTML & CSS pro začátečníky (část 23): Multimédia pro webové stránky (2)

Audio soubory můžete do HTML5 stejně snadno vložit jako videa. HTML5 k tomu poskytuje vlastní prvek audio pomocí prvku audio.

<audio src="song.mp3">
   Váš prohlížeč nepodporuje prvek audio.
</audio>

Prvku audio je přiřazeno jméno souboru k přehrávání pomocí atributu src. Soubor zatím není automaticky přehráván. K tomu jsou potřebné ovládací prvky.

Pokud chcete zobrazit ovládací prvky, přiřaďte prvku audio atribut controls.

<audio src="song.mp3" controls>
   Váš prohlížeč nepodporuje prvek audio.
</audio>

V prohlížeči by to mělo vypadat následovně:

Pokud chybí controls, není viditelný prvek přidaný přes audio. Smysluplné je vynechání tohoto atributu, pokud chcete vložit vlastní ovládací prvky pomocí JavaScriptu.

Také použití prvku audio není bohužel bezproblémové. Za to mohou opět prohlížeče, které podporují různé formáty. Následující tabulka vám poskytne aktuální informace v této oblasti.

Co tedy dělat? Prvek audio vám také nabízí možnost definovat další prvky source. Tyto prvky poté přiřadíte různé formáty pro jednotlivé prohlížeče. Příklad:

<audio controls>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Atributům src jsou přiřazeny jednotlivé soubory ve formátech pro jednotlivé prohlížeče.

Mimo controls existují pro prvek audio další atributy. Jeden z nich je autoplay.

<audio controls autoplay>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Pokud je atribut nastaven, spustí se přehrávání zvukového souboru automaticky, jakmile je načten. Tento atribut se obvykle nepoužívá, protože by návštěvníkům mělo být ponecháno rozhodnutí, kdy se zvukový soubor přehraje.

Dále je zajímavý atribut loop. Tento atribut zajišťuje, že soubor bude přehráván v neustálé smyčce.

Stejně jako při vkládání videí existují i pro zvukové soubory dva atributy type a media. Zde můžete uvést odpovídající MIME typy a codecy. Ve specifikaci HTML5 jsou uvedeny tyto typické údaje pro atribut type:

• type='audio/ogg; codecs=vorbis'

• type='audio/ogg; codecs=speex'

• type='audio/ogg; codecs=flac'

Upozorňujeme, že tyto dva atributy smí být použity pouze u prvku source, nikoliv u prvku audio.

Flash & Co. vložit

Flashové filmy bylo možné v předchozích verzích HTML vkládat kombinací prvků embed a object. Výsledná – mimochodem velmi nehezká – syntaxe vypadala například následovně:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

Tohle je klasický způsob přes prvek object a embed, který v HTML existuje již dlouho.





Ovšem zde "klasický" neznamená, že tato varianta byla v minulosti schválena W3C. V HTML 4 byl preferován prvek object, který byl správně interpretován Internet Exployerem. Netscape Navigator však sáhl po prvku embed. Tato odlišná interpretace vyžadovala kombinaci prvků object a embed.

HTML5 nyní oficiálně poskytuje k vložení aktivního obsahu oba prvky object a embed.

embed je kontejner určený k zobrazení ne-HTML obsahu, který není pokrytý jinými prvky jako jsou img, video, audio atd. K zobrazení vložených obsahů jsou obvykle vyžadovány plug-iny pro prohlížeč.

Je možné standardně vložit například Flash filmy pomocí embed. Zde je příklad toho, jak by to mohlo vypadat:

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

Různé vlastnosti lze přidělit prvcu embed. Nejdůležitější je samozřejmě znovu vlastnost src. Pomocí této vlastnosti se nakonec určuje soubor, který se má vložit. Pomocí vlastnosti type se specifikuje MIME typ.

V případě Flash je tento application/x-shockwave-flash. Pokud chcete vložit soubor LaTeX, zaznamenáte application/x-latex. Šířka a výška vloženého souboru jsou určeny pomocí width a height.

Mimochodem, existují i další vlastnosti, které však oficiálně nepatří do HTML5. Ty ale umožňují ovládání použitého plug-inu. V předchozím příkladu bylo přes obě „flash atributy“ allowscriptaccess a allowfullscreen stanoveno, že je možné použít skriptování a režim celé obrazovky. Existuje také vlastnost quality, pomocí které lze určit kvalitu Flash filmu.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

Prvek object

Prvek object slouží podobně jako embed jako kontejner pro obsah. Na rozdíl od embed však prvek object zná tři různé modely obsahu. Pokud prohlížeč rozpozná, že se jedná o grafiku, která může být přímo zobrazena, chová se tak, jako by se jednalo o prvek img. Pokud referencovaný objekt je webový obsah, bude zobrazen uvnitř iFramu. (Více o iFramech pak bude v pokračování této řady). V ostatních případech se prvek object chová jako embed.

Následující příklad ukazuje vložení Flash filmu pomocí prvku object.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       Ve vašem prohlížeči chybí Flash Plug-in.
    </p>
 </object>

Nyní se samozřejmě nabízí otázka, zda by se měl použít prvek object nebo embed. Na první pohled se zdají být oba prvky téměř identické. A opravdu může prvek object dělat vše, co umí prvek embed.





Při vkládání obsahu - kromě obrázků - by se mělo obvykle sáhnout po prvku object. Tento prvek totiž umožňuje zadání alternativního obsahu, který se zobrazí, pokud není možné načíst vložený prvek.