DailyMotion je další videoserver používající HTML5 a má zajímavé efekty

DailyMotion je videoserver, kterému se občas přezdívá francouzský YouTube. (Uhodli jste jste správně - DailyMotion sídlí v Paříži.)

Když jsem zmínil nedávné spuštění HTML5 verze YouTube a HTML5 verze Vimea, nesmím zapomenout zmínit HTML5 verzi DailyMotion.

DailyMotion je u nás málo známý, o to víc je ale jeho HTML5 verze zajímavější.

Tou první zajímavostí je, že ačkoliv HTML5 verze YouTube a Vimea běží od letošního ledna, DailyMotion přináší HTML5 verzi již od května loňského roku (oficiální oznámení).

Tou druhou zajímavostí je, že zatímco YouTube a Vimeo používají H.264 (což dává smysl, protože v tomto formátu mají - dle dostupných informací - videa uložena), tak DailyMotion nabízí videa ve formátu Ogg Theora a můžete si je tudíž pouštět ve Firefoxu 3.5+.

Do HTML5 verze není třeba DailyMotion nijak přepínat. Pouze místo na www.dailymotion.com stačí zajít na openvideo.dailymotion.com.

Ovšem to nejzajímavější jsou experimenty, které DailyMotion na videech provádí. Zatím je můžete vidět jen na demo stránce - najdete je v menu vlevo od videa.

Kromě otáčení videa nebo vytváření fotogalerie z běžícího videa, najdete i klasické filtry jako je rozmazání nebo edge-detection (za běhu videa pomocí JavaScriptu v prohlížeči). V téhle podobě nemají velký praktický smysl, jsou zde jako ukázka možností a možná že i předzvěst budoucnosti.

Video na webu často chápeme jako neměnné a pevně dané, jenže ono je součástí stránky a lze s ním manipulovat. DailyMotion to svým experimentem dobře ukazuje. Navíc ukazuje, že manipulace s videem pomocí JavaScriptu nejsou nereálné. Vzpomeňte, že ještě takové dva, tři roky zpátky bychom tomu asi nikdo nevěřili. Dnes už věřit můžeme. Možná to ještě neběží tak rychle, jak bychom si přáli, ale je to hodně blízko.

Uvidíme, zda jednou nějaký videoserver přijde na to, jak takových možností využít i pro normálního uživatele.

BTW Problém s kodekem stále zůstává. DailyMotion si v HTML5 podobě pustíte jen ve Firefoxu 3.5. Údajně si ho snad můžete pustit i v Safari, pokud máte do QuickTime plugin přidávající podporu OGG (pokud byste s tím někdo měli zkušenost, dejte mi prosím vědět).

UPDATE: Daily Motion si navíc spustíte nejen ve Firefox 3.5, ale i v Chrome nebo Safari (pro něj posílají speciálně překódovanou verzi videa).

Už i Vimeo experimentuje s HTML5 videem

Včera jsem psal o spuštění HTML5 verze YouTube, dnes můžu přidat další videoserver.

Vimeo neváhalo a krátce po oznámení HTML5 na YouTube přišlo s vlastním oznámením. I videa na Vimeu si nyní můžete přehrávat bez Flashe, jen za pomoci technologie HTML5 (značka <video>). Stačí otevřít jakékoliv video a zvolit odkaz "Switch to HTML5 player" napravo dole od něj.

Omezení jsou stejná jako na YouTube, musíte mít prohlížeč Google Chrome nebo Safari a nefunguje přehrávání videa ve fullscreenu.

Autoři Vimea zdůrazňují, že se zatím jedná jen o beta test. Přesto obsahuje jednu výhodu, kterou základní Flash přehrávač Vimea nemá. V HTML5 verzi můžete ve videu bez problému a celkem plynule přeskakovat dopředu i do dosud nestažených částí videa. To Flash přehrávač Vimea neumí, u něj je vždy nutné počkat na postupné stažení videa.

Google spouští HTML5 verzi YouTube. Bez reklam.

Google včera oznámil spuštění verze YouTube používající možnosti přehrávání videa HTML5. Vedlejším efektem je, že se vám při přehrávání videa nezobrazují reklamy.

Nové značce <video> z HTML5 se věnuji od počátku tohoto blogu, můžete zde tak snadno najít téměř celou její historii. Detailnější popis najdete v příspěvcích Zkoušíme audio a video v Safari a Ukázka podpory videa ve Firefoxu 3.1.

HTML5 variantu YouTube si můžete aktivovat na stránce http://www.youtube.com/html5 Podporovány jsou pouze prohlížeče Google Chrome a Safari (Firefox sice HTML5 video umí, ale neumí kodek, ve kterém jsou videa YouTubu - tuším se jedná o H.264).

Po přepnutí můžete používat YouTube stejně jako dřív, s tím že se vám videa místo ve Flashovém přehrávači budou přehrávat přímo v HTML; zkuste si to na libovolném videu. Na některých stránkách se mi i přesto videa přehrávala ve Flashi (např. na stránkách s uživatelskými profily nebo u embedovaného videa na webech třetích stran).

Jediným omezením, na které jsem narazil, je absence fullscreenu. Tu totiž Chrome ani Safari nemají, v tuto chvíli ji podporuje asi jenom Firefox.

Závěr

HTML5 verze YouTube je (až na onen chybějící fullscreen) použitelná a můžete si ji bez obav sami zapnout, ať již jen na zkoušku nebo na trvalo.

Jedná se o ukázku dalšího mezníku, který technologie ze sbírky HTML5 dosahují. Je to ovšem ukázka omezená - verze YouTube, která by fungovala pomocí HTML5 v každém prohlížeči, se totiž jen tak nedočkáme. Problémem je zatím neexistující jednotný kodek, který by byl schopen splnit požadavky všech výrobců prohlížečů. Ovšem podobné snahy jako je HTML5 verze YouTube nebo ThePiratBay v HTML5 mohou hledání jednotného kodeku akcelerovat.

K čemu bude magická značka device

Bez přístupu webových stránek k webkameře a mikrofonu si budoucnost webu dnes už asi nemůžeme představit. Byl by třeba i bez rostoucích trendů typu rozšířená realita (augmented reality), s nimi je zapotřebí dvojnásob.

Nápady, jak takový přístup zařídit, nejsou nové, ovšem teprve nedávno se začalo pracovat na standardním řešení pod hlavičkou HTML5.

A proto vznikla značka <device>. Jedná se o abstraktní rozhraní pro přístup k lokálním zařízením. Takovým zařízením může být webkamera (ale nejen ona). Značka device zajistí jen přístup k datům, nikoliv jejich výstup ani zpracování, k tomu využije napojení na některou další technologii. Takový zápis:

<device type="media" onchange="update(this.data)">

umožní uživateli zapnout kameru (jedná se o akci, kterou musí uživatel potvrdit), přičemž vlastní výstup v tomto případě směřuje do značky video:

<video autoplay></video>
<script>
function update(stream) {
document.getElementsByTagName('video')[0].src = stream.URL;
}
</script>

(Příklad pochází ze specifikace.)

To není vše, obsah kamery by nemusel být jen vykreslován, mohl by být zpracováván a pomocí canvasu upravován (např. pro vytvoření zmíněné rozšířené reality) a v případě napojení streamu na technologii Web Sockets může být stream videa zasílán do internetu (např. pro tvorbu videokonferencí - příklad pochází z blogu WHATWG).

Celý návrh je zatím jen první myšlenkový draft a jak to u podobných případů bývá, může před svou realizací projít velkými změnami nebo být zcela zrušen.

Mé poznámky:

1. Nejsem si jist, zda potřebujeme mít HTML značku <device>, nepostačilo by pouze javascriptové rozhraní? Ale je možné, že značka má vytvořit nějaké UI pro výzvu uživateli (podobně jako ji tvoří třeba <input type="file">), pak by dávalo umístění do dokumentu smysl.
   
2. Ptám se samozřejmě i sám sebe, zda potřebujeme <device>, když lze podobný výsledek dosáhnout ve Flashi. A hned si odpovídám, že potřebujeme. Protože zapsání značky <device> spolu s několika řádky JavaScriptu bude pro klasického webového vývojáře prostě neporovnatelně jednodušší, než projít kompilačním procesem Flashe, resp. se jej vůbec naučit. V tomhle Flashi trochu ujíždí vlak. Obsahuje sice zajímavé technologie, ale nedokáže je rozumně zpřístupnit webovým vývojářům formou, na jakou jsou zvyklí. Pokud Web dokáže nabídnout technologie stejného kalibru (to se mu zatím nedaří, ale směřuje k tomu poměrně dobře), bude muset Flash nabídnout něco jiného, čím by zaujal.
   

O HTML5 zpíval už Bob Dylan (video uvnitř)

Možná tu píseň znáte ve verzi The Times They Are A-Changin'. Její méně známá verze ovšem zpívá o změnách v HTML5.

Poslechněte si ji v interpretaci Daniela Davise z Opery. Nemá sice tak pěkný hlas jako Bob Dylan, ale zas pěkně hraje na tu malou kytaru, které se správně říká ukulele.



Anebo trochu živější interpretaci v podání Bruce Lawsona (rovněž z Opery!):



Text v sobě skrývá mnoho pravdy ze standardizačního prostředí.

HTML5 – It is a Changin’

by Jeffrey G. Allen

Come gather ’round coders
wherever you roam
And admit that internet
Around you has grown
And accept that soon
A new spec will stand on its own.
If your skills to you
Are worth savin’
Then you better starting learnin’
Or you’ll sink like a stone
For HTML5 it is a-changin’.

Come designers and developers
who prophesize with your blog
And keep your mind wide
this chance won’t come again
And don’t speak to soon
For the spec is still in spin
And there’s no telling who
will be recodin’.
For the early adopter now
Will be later to win
For HTML5 it is a-changin’.

Come senators, congressmen
Please heed the call
Don’t sit on your thumbs
In the gathering hall
for he that gets lost
will be he who has stalled
There’s a spec in the works
And it’s changin’.
It’ll soon trim down your code
And add meanin’
For HTML 5 it is a-changin’.

Come mothers and fathers
Throughout the land
Learn to use content filters
And help to fight spam
Your sons and your daughters
Have gone mobile
And you’re old ways of surfing
is rapidly changin’.
Please get off the new one
If you can’t understand
For HTML 5 it is a changin’.

The spec it is out
It is Working Draft
The current one now
will later be past
As the new one
will venture to last
The spec is
rapidly changin’
And the current one now
will later be last
for HTML5 it is a changin’.

Po Internetu ovšem kolují rozmanité varianty, např.

Come Zeldman and Meyer
Malarkey and Mols
Let your songs of web standards
Ring in the halls.
And the lessons you teach
disseminate to one and all.
For the web that you now know
is not what you knew
For HTML 5 it is a changin’.

nebo

Mozilla and Safari,
Opera and IE,
HTML 5 needs your help
To be all it can be,
Wide browser support
Would help tremendously
And don’t forget about support for CSS3
HTML 5 It is a changin’

Na tento úžasný šlágr upozornila Molly E. Holzschlag.

Nedalo mi to a vzpomněl jsem si i na svůj HTML5 trailer, který jsem před lety vytvořil experimentuje s videem.

Řešení včerejší hádanky. Podívejme, jak jste si vedli

Včera jsem vám dal hádanku, dnes předvedu řešení. Ať víte, zda můžete skákat radostí nebo ne. BTW přišlo mi cca 100 odpovědí, to je hezké.

Připomenu zadání. Stránku http://id.annevankesteren.nl/ tvoří jednoduchý kód (viz obrázek níže), ale přesto výsledná podoba stránky odporuje zdravému webdesignerskému rozumu, např. je má černé pozadí, a barevné písmo, ačkoliv zdrojový kód žádné definice barev neobsahuje. Vaším úkolem bylo určit, čím to je.



Napřed tu špatnou odpověď: Stránka obsahuje SVG, které je zodpovědné za ony grafické změny.

Pokud jste takhle odpověděli, nechali jste se pěkně nachytat. Stránka sice obsahuje SVG obrázek, ten ovšem obsahuje pouze logo OpenID:
Mohli jste si to ověřit buď dešifrováním onoho SVG souboru, který obsahuje dvě vyplněné cesty (s dešifrováním pomůže tutorial), nebo i jeho pouhým zobrazením v prohlížeči. Jak prosté milý Watsone!

A jaká je správná odpověď? V hlavičce HTTP se vyskytuje položka Link: <fancy.css>; rel=stylesheet a za design stránky je zodpovědný stylopis fancy.css.

Položka Link v hlavičce HTTP je alternativním způsobem pro přidružení stylopisu ke stránce a funguje analogicky jako značka LINK v hlavičce HTML.

Tento mechanismus se běžně nepoužívá (nepodporují jej všechny prohlížeče). Je zmiňován ve specifikaci HTML4.01, v minulosti tu byla několikerá snaha jej začlenit i do specifikace HTTP, ale neúspěšně (podrobně celý proces najdete zdokumentovaný na wiki W3C).

BTW před rokem jsem o tomto mechanismu psal na Zdrojáku, když jsem jej ještě vedl.

Pozn.: Někdo z vás si všiml, že Firefox použije stylopis i pro zobrazení jeho samého (taková kuriozita: styl stylující sám sebe). Vypadá to sice moc hezky, ale jedná se evidentně o chybu prohlížeče.

Zhodnocení řešitelů

Výsledek hádanky dopadl dobře a moc mě potěšil. Řada z váš našla bez dlouhého zaváhání správnou odpověď.

Je zároveň vidět, jak dobré nástroje dokáží posílit generační zdatnost. Kdybychom stejnou hádanku zadali takové 4 roky nazpět, výsledné skóre by pravděpodobně tolik povzbudivé nebylo.

Nástroje jako jsou Firebug, Web Inspector a další nám pomáhají hravě vyřešit i problémy, se kterými jsme se dosud nesetkali. Odpovězte si sami, zda byste problém vyřešili (resp. rychle vyřešili, nebo zda vůbec vyřešili) v případě, že byste podobné nástroje neznali. A tím nemyslím jen to, že byste je neměli právě po ruce, ale kdybyste je neviděli nikdy v životě.

Tak na viděnou u nějaké další hádanky. Ostatně pokud víte o nějaké další, třeba i lepší, tak se určitě pochlubte.

Hádanka pro webdesignery a kodéry. Vyřešíte ji?

Mám pro vás malou hádanku. Znáte to - takovou, kterou génius vyřeší na první pohled, inteligent za pár minut, polointeligent za hodinu a ostatní si nad ní můžou lámat hlavu třeba celý den.

Ukážu vám jednoduchou HTML stránku. Má primitivní kód, asi na deset řádek. Přesto se její podoba v prohlížeči zcela vymyká běžné webdesignerské logice. Vaším úkolem je zjistit proč. Proč stránka vypadá tak, jak vypadá.

Podotýkám, že problém není postaven na žádných tajných novinkách z HTML5 ani CSS3. Klidně ignorujte, že stránka má HTML5 doctype, fungovala by stejně i bez něj. Ona záhada nepoužívá nic, co přišlo později než staré dobré HTML4 z 1999. Nejedná se ani o fintu žádného prohlížeče - stránka skutečně má správně vypadat tak, jak vypadá.

Hádanka

Jedná se o stránku http://id.annevankesteren.nl/ a vaším úkolem je zjistit, proč vypadá jak vypadá, tj. proč má barevné písmo, pozadí, nebo text na dva řádky atd., ačkoliv běžná logika tvrdí opak.

Stránka by měla vypadat asi takhle:


Abyste ji takto viděli, použijte Firefox nebo Operu. Jakmile problém vyřešíte, poznáte proč. Ale znova opakuji, nejedná se o žádnou fintu prohlížeče, nýbrž opravdu jen o standardní chování.

Vaše odpovědi můžete psát do komentářů. Zatím je nechám neviditelné.

Řešení najdete v mém dalším příspěvku.