PC-politika.cz - Novinky: Video: Vkládání videa (4) shrnutí PC-politika

Video: Vkládání videa (4) shrnutí

Seriál se zabývá vkládáním videa z pohledu čistoty zdrojového kódu, tedy validace. V minulém díle bylo vysvětleno, v čem je zásadní problém, že se vložené video (jeho kód) na web nezobrazuje v prohlížeči IE7/8. Např. kód HTML z Youtube. Důvodem je element <embed>. Článek ukazuje konkrétní kódy, včetně validního řešení a zobrazování.

Jak jsem již uvedl v minulém díle, příčinou nekorektního zobrazování videa na www stránkách - případně žádného zobrazování videa - je v prvé řadě přítomnost prvku/značky/elementu/tagu <embed> v kódu HTML, určeného pro vkládání. Vezmeme-li v úvahu, že uživatel má nainstalován v PC správný přehrávač pro konkrétní formáty vetěšinou swf a flv. Pokud ovšem v kódu figuruje "embed", prohlížeč IE jej nebere vůbec, a tedy video nezobrazí. Ostatní prohlížeče: Chrome, Mozila Firefox, Opera... video zobrazí, ale HTML kód není validní. Touto cestou tedy nepůjdeme!

Jak vypadá nevalidní kód pro video (např. YouTube)

Jestliže si tedy skočíte například na YouTube/video a kliknete na "Sdílet" a pak (do boxíku vpravo) a skopírujete (CTRL+C) kód v řádku pro vzdálené zobrazování videa, máte video v kapse. Jen uložíte na svůj web do HTML stránky. V PHP stránce je to trochu složitější. Takový kód vypadá, jak je vidět na obr.č. 1. Má zmíněné elementy <embed>, t akže od nich rychle pryč!!! Takový kód není validní, navíc v IE 7/8 se video vůbec nezobrazí.

Obr. č.1: Takto vypadá HTML kód pro vložení videa z YouTube. Nutná je úprava. Tento kód nedoporučuji používat. Není validní! Navíc video se v IE 7/8 vůbec nezobrazuje!

Jak má vypadat validní kód pro video (např. YouTube, swf, fvl...)

A zde je tedy upravený HTML kód pro vložení videa, třeba z YouTube, případně Flashe ve formátu swf,fvl. Jak si můžete všimnout, z nevalidního kódu jsem odstranil především nežádoucí elementy <embed>. Vyrazil jsem rovněž atributy a jejich vlastnosti jako např. "flashvars", dále "allowscriptaccess" a další, které byly nevalidní. Jednoduše řečeno - původní "embed" a vše co bylo v jeho obsahu, nahradil druhý párový element "object". Takže kód uzavírá poněkud nezvyklé jeho zdvojené ukončení. Přidány byly některé vlastnosti <param name;. Tento upravený HTML kód valid_vido_kvido.html pro vkládání videa na www stránky je 100% validní (viz. obr. č.2).

valid_video_kvido

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/tNJhc83qhKc&hl=cs&fs=1
&color1=0×507187" width="200" height="150">
<param name="movie" value="http://www.youtube.com/v/tNJhc83qhKc&hl=cs&fs=1&color1=0×507187">
<param name="autoStart" value="-1">
<param name="bgcolor" value="#919191">
<param name="menu" value="false">
<param name="quality" value="high">
<h5>No flash</h3> <h5> No flash </h5>
<br>Prosím, nainstaluje si <a href="http://www.macromedia.com/go/getflashplayer" target="_blank">FLASH plugin</a>.
</object>

Obr. č.2: Validator W3C hlásí validní kod pro toto video

Shora uvedený HTML kód pro vkládání videa (valid_video_kvido) bez púroblémů zobrazí videa ve všech dostupných prohlížečích novější verze. Validní zobrazení poskytují browsery: Google Chrome, IE 7/8xx, Mozilla Firefox 3xx, Netscape 8/9xx, Opera 8/9xx, Safari-Linux. Testování prokázalo plnou funkšnost zobrazování. Nejhorší kvalitu dosahuje Google Chrome, a to "plaváním" obrazu při rolování stránky (když je posuvník stránky v pohybu).