Skip to content →

iOS 11: Dobrá zpráva, video žije!

Nedávno jsem publikoval příspěvek iOS 11 z pohledu email marketéra, ve kterém jsem se trochu pozastavil nad obavou absence podpory HTML5 videa v poštovním klientovi Mail.app v nové verzi iOS 11 z kuchyně společnosti Apple.

Dobrá zpráva! Video žije! Pravděpodobně se jednalo pouze o chybu testovací verze, nebo o úpravu části vykreslovacího jádra poštovního klienta u značky <video>, kde se namísto vlastního mediálního sdělení přejímala část fallbacku.

O co jde? Je to ve své podstatě velmi jednoduché – stejně jako na webu, i v emailové zprávě či šabloně musíte definovat, co chcete přehrávat a případně ošetřit i stav, kdy poštovní klient nepodporuje tzv. bohatý obsah (rich-content).

Ukážu na příkladu:

<video width="320" height="240" controls poster="https://www.example.com/cesta/poster.jpg" src="https://www.example.com/cesta/k/videu/moje-video.mp4" >
<!-- fallback -->
<a href="https://www.example.com" ><img width="320" height="240" src="https://www.example.com/images/nahled-videa.jpg" /></a>
</video>

Tagem <video> iniciuji v renderovací části poštovního klienta informaci, že bych na daném místě chtěl přehrávat video. Pokud klient umí, nabídne možnosti dle svého UI.

Celé video navíc mohu trochu řídit, takže si mohu upravit mnoho atributů, jako v mém příkladě jsou:

  • width/height: informace o výšce a šířce přehrávaného videa;
  • controls: umožnění ovládání videa dle zvyklostí uživatele, včetně práce se zvukem, pauza/návrat v přehrávání aj.;
  • poster: obrázek, který slouží jako podkladový „banner“, který se zobrazuje v případě, než se načte video;
  • src: cesta k videu – zde pozor! HTML5 v poštovních klientech podporuje formáty pouze .mp4 nebo .m4v;
  • fallback (komentář): v případě neznalosti přehrávání videa zobrazit jen statický obrázek s možností prokliku, kam jen potřebuji.

Možností ovládání je samozřejmě habaděj. Na příkladu ukazuji pouze základ.

Příklad ukazuje, že v případě požadavku na přehrávání videa se bere hlavní – rodičovský – záznam <video>. V případě problémů (např. neumím video zpracovat) se potom tato část ignoruje, kód pokračuje a vykresluje se uživateli až část prolinku <a> a obrázku <img>. To už umí kde co – dokonce i Microsoft Outlook 😀

Není to takové šamanství, jak občas některé marketingovky prezentují, že? 😉

Published in Práce

Comments

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *