Řeším přehrávání videa — jak poznat mobil?*

Blemik:
A proč ne všem HTML5 video? Nebo alespoň těm, kteří nemají flash player. Detekovat telefon je v tomhle případě nesmysl.

Blemik:
Nenúť PC používať flash, keď to nie je nevyhnutné.

Sprav to takto:

Ak prehliadač podporuje HTML5 video, zobrazí sa to, ak nie, zobrazí sa tvoj Flash player (alebo akýkoľvek iný kód/text ktorý namiesto neho dáš).

Reaguji na Blemika:
Uvedený kousek kódu je obyčejné HTML. Není šitý na míru žádnému konkrétnímu přehrávači.

„PC bych chtěl pedhazoat klasicky flash player“
Fuj. Proč tohle vůbec někdo dělá?
Zkus si na PC v prohlížeči vypnout flash. Většina stránek začne fungovat rychleji, prohlížeč vydrží víc týdnů bez restartu… a weby, které ti řeknou, ať si musíš nainstalovat flash, tě začnou otravovat.

Reaguji na Blemika:
„třeba hloupý autostart“
Atribut autoplay. Ale ne všude může fungovat, minimálně Android vyžaduje, aby přehrávání spustil sám uživatel.

Reaguji na Blemika:
Na desktopu funguje autoplay všude. Na mobilech už prakticky nikde, což není chyba, ale úmyslná vlastnost.

„nikde jsem se nedočetl jak to validně udělat“
Jak validně? A proč se vůbec snažíš o validitu?

Reaguji na Blemika:
„chci mít jistotu, že se zobrazí html5 video jen těm co se html5 video zobrazit má?“
Nevím.
Ale validita HTML kódu ti žádné jistoty nedá.

Blemik:
„je skutečně to správné řešení?“
„chci mít jistotu, že se zobrazí html5 video jen těm co se html5 video zobrazit má?“
Nájdi si akýkoľvek článok na tému "HTML5 video fallback", toto je bežný postup. Ak prehliadač nepozná tag <video> tak mu nepripisuje žiadnu váhu a normálne pokračuje ďalej, akoby tam ten tag ani nebol (prípadne ho vykreslí ako blokový element, neviem ako sa prehliadače v takejto situácii správajú) - zobrazí to, čo je v ňom. Ak prehliadač ten tag pozná, tak vie, že to čo je v ňom zobrazovať nemá, ale má zobraziť video.

Validitou sa nezaťažuj. Nie sú to žiadne striktné pravidlá ktorých by sa prehliadače držali.

Reaguji na Blemika:
Počítačů bez flashe přibývá podobně rychle jako mobilů. Upřednostňuješ polovičaté řešení, přestože to správné jsi zde dostal naservírované na zlatém podnose.

„později chci founky přesměrovávat na mobilní stránku“
Udržovat stejný obsah na dvou různých adresách je také špatný nápad.

„našel sjem kod který v php rozpoznává mobil :)“
Jaký kód? Až vyhledávač pošle někoho na tuto tvoji otázku, bylo by fajn, kdyby zde šla najít odpověď.

Dosud jsem video dělal natřikrát - pomocí značky <video> ve formátu MP4 jako základ, uvnitř značky ještě OGV alternativa pro Firefox na Windows XP a Linuxu, a konečně plugin (Flash/Silverlight) na základě detekce verze sterého Internet Exploreru bez podpory značky <video>. Za rok tohoto používání v mé cílové skupině se počet stažení čehokoliv jiného, než MP4, blíží statistické chybě (pod 1 %), takže přecházím výhradně na MP4 a fallbackem bude odkaz ke stažení. Výhodou bude kromě časové úspory při vyrábění tří verzí téhož videa i snížení obsazené kapacity na hostingu.

xROAL:
„Nájdi si akýkoľvek článok na tému "HTML5 video fallback", toto je bežný postup. Ak prehliadač nepozná tag <video> tak mu nepripisuje žiadnu váhu a normálne pokračuje ďalej, akoby tam ten tag ani nebol (prípadne ho vykreslí ako blokový element, neviem ako sa prehliadače v takejto situácii správajú) - zobrazí to, čo je v ňom. Ak prehliadač ten tag pozná, tak vie, že to čo je v ňom zobrazovať nemá, ale má zobraziť video.“


Můžu potvrdit, sám jsem měl na jednom webu vše ukládané v tagu <video> a pak jsem k mému překvapení zjistil, že ne ve všech prohlížečích to funguje správně. Prostě to dělá problémy, jistota je použít něco jiného z mého pohledu.

Reaguji na snazimse:
„jistota je použít něco jiného z mého pohledu“
A to je co? Flash Player? Nefunguje v mobilních prohlížečích, postupně mizí i z desktopů. To, že jsi si nepřečetl seznam podporovaných formátů videa v jednotlivých prohlížečích neznamená, že je značka <video> špatná.

Fisir
„To, že jsi si nepřečetl seznam podporovaných formátů videa v jednotlivých prohlížečích neznamená, že je značka <video> špatná.“

Netvrdím, že je špatná, jen říkám, že občas je to s podporou zatím horší, ale do budoucna si myslím, že to bude určitě v pořádku.

snazimse:
„Netvrdím, že je špatná, jen říkám, že občas je to s podporou zatím horší, ale do budoucna si myslím, že to bude určitě v pořádku.“
Podpora <video> je v 90% prohlížečů.
Statistiku na podporu flashe se mi nepodařilo dohledat ale třeba v mém mobilu si nešktrne. A řekl bych, že u ostatních mobilních zařízení to bude podobně. A jelikož podle globálních statistik se už více stránek zobrazuje na nějakém mobilním zařízení než na desktopu tak s podporou flashe to vlastně už tak horké nebude. Nemám to bohužel podloženo daty ale z výše uvedeného soudím že už dnes má video větší podporu než flash.

Pro Českou republiku ta čísla vycházejí ještě příznivěji.
asi 95 % užívaných prohlížečů podporuje <video> a MP4
asi 1-2 % podporuje <video>, ale ne MP4 (stará Opera, Firefox na Win XP a Linuxu)
asi 2 % nepodporuje <video>, potřebuje alternativu (Internet Explorer 6, 7, 8)
asi 1-2 % nepodporuje žádná videa (Opera Mini, prastaré prohlížeče)

Zajímavé, že žádná statistika podpory Flashe nebo Silverlightu v užívaných prohlížečích není dohledatelná. Při pozorování později narozených nabývám dojmu, že prohlížejí Internet hlavně na mobilních zařízeních, která Flash prakticky nepodporují.

Pro většinu lidí tak bude vhodná kombinace <video> a MP4. Nekompatibilní zhruba 3 % uživatelů, kterým by video zobrazit nějak jinak šlo, zůstávají otázkou k dořešení. Buď mi tito uživatelé za vytvoření alternativy stojí (platí), nebo ne a můžu jim dát aspoň odkaz na stažení toho stejného souboru MP4.

Další možností je použít cizí službu k nahrání videa (YouTube), která má kompatibilitu vyřešenou - automaticky vytvoří potřebné kopie v jiných formátech a sama je servíruje prohlížečům dle jejich schopností.

Reaguji na snazimse:
Hlavní pointou příspěvků adresovaných Blemikovi je, že se nemá rozhodovat podle User-Agenta, ale podle detekovaných schopností. Jestli upřednostní flash nebo <video>, to už je nakonec jedno, podstatné je, aby si vybíral z toho, co je dostupné, ne aby diktoval, co dostupné má být.

„Prostě to dělá problémy, jistota je použít něco jiného z mého pohledu.“
Neexistují jistoty. Nikdy neexistovaly. Teď je ten chaos formát akorát maličko průhlednější, než býval.
Ojedinělé potíže mívá i Flash. Když to trochu přeženu, každý druhý update něco rozbije :-)

„ale do budoucna si myslím, že to bude určitě v pořádku“
Kvůli 4K videům bude hlad po další generaci kodeků, což bude opět boj, kde koncový uživatel usedne na čestné místo rukojmího.


Reaguji na Trejpu:
„kromě časové úspory při vyrábění tří verzí téhož videa i snížení obsazené kapacity na hostingu“
Stačí dvě verze, jelikož Flash už od verze 9.0.115 podporuje MP4. Formát FLV by měl být dávno mrtvý.
V práci jako záchranný formát používám WebM. Konverze videa jde zautomatizovat a co se týče zabraného místa, to je čím dál víc zadarmo.

„asi 1-2 % podporuje <video>, ale ne MP4 (stará Opera, Firefox na Win XP a Linuxu)“
Plus ještě i libovolný novější Windows, pokud je to Evropskou Unií vynucená edice bez Windows Media Playeru. Nemáš-li WMP, nemáš ani knihovny na podporu MP4.
Momentálně necelých 18 % ze všech u nás používaných Firefoxů schopných využívat podporou MP4 ze systému nedokáže přehrát MP4. Nemyslím si, že je to zanedbatelná minorita. Zmenšuje se, ale pomalu.
Nová Opera je na tom od verze 24 přesně stejně jako Firefox, do verze 24 neuměla MP4 vůbec. Totéž platí pro ostatní prohlížeče založené na Chromiu, vyjma prohlížeče Seznamu, který za podporu MP4 zaplatil, aby ji mohl mít na všech systémech.

„asi 2 % nepodporuje <video>, potřebuje alternativu (Internet Explorer 6, 7, 8)“
Pokud se místo elementu <video> použije <embed>, chopí se videa ve starých Explorerech objekt WMP, ovšem jen pokud podporuje MP4 (tzn. opět jsou ze hry WinXP a N edice novějších Windowsů => řeší to jen třetinu z této minority).
Z mých starších měření vychází zajímavý jev, že uživatelé Exploreru 8 jsou odpovědní za zřetelně větší množství přehrání videí, než by odpovídal jejich tržní podíl při brouzdání.

Některé pluginy do prohlížečů a zlepšovací programy dokážou <video> porouchat. Pak je vhodné chytat onerror a mít nějaký plán B. Což může být zase flash.

„Zajímavé, že žádná statistika podpory Flashe nebo Silverlightu v užívaných prohlížečích není dohledatelná.“
Co přesně by tě zajímalo?

Chamurappi:
„Co přesně by tě zajímalo?“
1) Zajímala by mě celková vybavenost lidí Flashem (kolik % uživatelů).
2) Nakolik mi podpora Flashe překryje nepodporu <video> + MP4.
3) Jaký použít vhodný Flash přehrávač MP4 (zadarmo).
4) Jak vhodně kaskádovat fallbacky - implementace toho Flash přehrávače.

Myšlenka je taková:


Jenže tak jednoduché to samozřejmě nebude. V uvedeném případě bude přinejmenším třeba navíc soubor webm nebo ogv. Jenže když něco z toho nezafunguje, tak z důvodu podpory dané technologie prohlížeče místo alternativy zobrazí jen původní objekt s chybovou hláškou. Bude vhodné alternativy nezanořovat, ale raději doskriptovat, zřejmě jako reakci na onerror? Je možné na straně klienta detekovat rovnou podporu technologie včetně kodeku a servírovat mu konkrétní řešení skriptem na základě dopředného rozhodnutí skriptu?

Trejpa:
„Nekompatibilní zhruba 3 % uživatelů“

Tak to jsem zrovna, asi měl štěstí, na tyto nekompatibilní prohlížeče.

Chamurappi:
„Ojedinělé potíže mívá i Flash. Když to trochu přeženu, každý druhý update něco rozbije :-)“

Souhlasím, a taky Flash, mi podle testování, taky o dost žere výkon.

Trejpa:
„Jenže když něco z toho nezafunguje, tak z důvodu podpory dané technologie prohlížeče místo alternativy zobrazí jen původní objekt s chybovou hláškou. Bude vhodné alternativy nezanořovat, ale raději doskriptovat, zřejmě jako reakci na onerror?“

To si nevieš nájsť, ako to správne „zanorovať“ a aký to má mať správny tvar? Napríklad http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=Pr32l_A21JU (posledný odsek), či veľa iných stránok. Určite sú aj nejaké v češtine.

_es:
Máš pravdu, neumím nalézt příklad, jak zpřístupnit video jen za použití jediného souboru (třeba MP4). Neznám žádný fallback, který by prohlížeče podporující <video> a nepodporující nativně MPEG shodil do Flashe. Rád se nechám poučit. Snad bych mohl testovat skriptem onerror. Znáš i jiné řešení?

Trejpa:
„jak zpřístupnit video jen za použití jediného souboru“
Prečo len za použitia len jedného súboru? To je taký problém to video skonvertovať do ďalšieho formátu?

_es:
Zopakuji, co jsem psal výše - zabírá to čas výroby a také prostor na hostingu. A pokud by převážná část prohlížečů podporovala MP4 skrz <video> a nebo Flash, pak bych upřednostnil řešení nějakým jednoduchým fallbackem než zdvojováním nebo ztrojováním souboru videa.

Trejpa:
Vymýšľaš požiadavky, ktoré ani Blemik nedal. Na „čas výroby“ a „priestor na hostingu“ reagoval v [#20] Chamurappi. Asi by sa niečo také dalo spraviť, možno to aj niekto spravil. Nešlo by však prehrať video vtedy, ak by prehliadač podporoval <video>, mal vypnutý JS a súčasne nepodporoval MP4 vo <video>. Najjednoduchšie by asi bolo pridať odkaz na Flash verziu prehrania - ak už teda požiadavka len na jeden súbor musí byť.

Reaguji na Trejpu:
„1) Zajímala by mě celková vybavenost lidí Flashem (kolik % uživatelů).“
Podle rankings.cz skoro 78 %.
V mých měřeních na desktopové verzi webu, který má i oddělenou mobilní verzi, má flash 82 % lidí. Soudě dle čísel z jednotlivých dnů v týdnu mají flash lidi v práci výrazně častěji (o všedních dnech 85 %) než mimo práci (o víkendech 72 %).

„2) Nakolik mi podpora Flashe překryje nepodporu <video> + MP4.“
Flash z ní překryje 91 % (měřeno tamtéž, o všedním dnu).
Silverlight by z ní překryl 50 %.
Alespoň jeden z těchto pluginů má 94 % z této skupiny. Což znamená, že záplatovat silverlightem nemá moc cenu.
Nezměřil jsem, u kolika lidí by se videa dokázal chopit nějaký další plugin (WMP, QuickTime, VLC atd.), to by asi bylo složitější.
Úplně mimo tato měření jsou lidi bez zapnutého JavaScriptu.

„3) Jaký použít vhodný Flash přehrávač MP4 (zadarmo).“
S tímto bohužel žádná statistika nepomůže :-)
Nedávno jsem psal specifikaci pro minimalistický flashový přehrávač, který by poskytoval stejné API jako <video> (jehož ovládací prvky si vyrábím sám). Nemělo by být těžké ho vytvořit. Při té příležitosti jsem narazil na MediaElement.js – ten se tváří, jako že kdysi řešil přesně to, co bych chtěl, ale dnes už je to plnohodnotné řešení na milion věcí, které nepotřebuji.

„Jenže když něco z toho nezafunguje, tak z důvodu podpory dané technologie prohlížeče místo alternativy zobrazí jen původní objekt s chybovou hláškou.“
Hm. Máš pravdu. To jsem si doposud neuvědomil, že má <video> tento nedostatek.
Pokud se HTML postaví obráceně, že přednost má flash, funguje fallbackování to rozumněji.

„Je možné na straně klienta detekovat rovnou podporu technologie včetně kodeku a servírovat mu konkrétní řešení skriptem na základě dopředného rozhodnutí skriptu?“
Pokud existuje document.createElement("video").canPlayType, podporuje prohlížeč <video>. Pokud volání canPlayType("video/mp4") vrátí cokoliv jiného než prázdný řetězec (třeba "maybe" nebo "probably"), pak nejspíš MP4 zvládne přehrát.


Reaguji na _es:
„Vymýšľaš požiadavky, ktoré ani Blemik nedal.“
Ano, vymýšlí a dobře je i popsal. Je celkem jedno, co chce Blemik.

„To je taký problém to video skonvertovať do ďalšieho formátu?“
Asi zase tak velký problém to není, ale bylo by hezké, kdyby to nebylo nutné a kdyby příprava videa byla podobně snadná jako příprava obrázku.