Long Story Short: Embedoval jsem video

Byla středa ráno. Přes zatažené žaluzie nešlo vidět, jak je venku, ale věřil jsem, že je tam hezky. Měl jsem dobrou náladu. Zrovna jsem dodělal práci na scriptu pro nákup zboží a nadešel čas na mou denní dávku radosti… prohlédnout si tickety od klientů.

Otevřel jsem Zendesk a četl jsem jeden po druhém: oprava písmenka, přidání pomlčky, změna barvy textu, přidání videa… a hele video. Znělo to zajímavě, tak jsem se rozhodl tímto ticketem začít. Zadání znělo celkem jasně:“Přidej video na stránku detailu produktu.“ Praktika tak nevšední jako Black Friday v červenci. Marně jsem hledal v zadání účet na nějakou službu ve stylu Vimea nebo YouTube. Žádná tam totiž nebyla. Vždy jsme pro embedování videí používali služby třetích stran. Proto jsem se docela těšil, že se více osobně seznámím s HTML5 přehrávačem.

Samotné nahození videa bylo snadné. Na radosti mi však ubrala nedostatečná specifikace samotného HTML, protože v ní není specifikován formát videa. Bylo mi známo, že když použiju H.264, tak video téměř všude pojede. Jenže ono by bylo v budoucnosti problematické vysvětlovat klientovi, že se mi nechtělo jejich video konvertovat a kvůli toho si ho někteří zákazníci nemohli přehrát. To by na nás rozhodně dobré světlo neházelo.

Finální HTML kód vypadal takhle

Už během přidávání videí jsem si všiml, že se v různých časech videa nacházejí buy buttony. Tehdy jsem jim nevěnoval moc pozornosti. Jejich existenci jsem si pořádně uvědomil až poté, co dorazil další ticket týkající se videí. Náš klient chtěl mít tato tlačítka klikací s tím, že by chtěl pod tato tlačítka schovat speciální balíček 2+1. (Článek o našem soupeření, kdy jsem narazil na neochotu klienta vytvořit nové ID pro 2+1 produkty, nechám raději na jindy…)

V tuto chvíli byl hlavní úkol udělat tlačítka klikací. Tady mi jako nejlepší řešení připadalo mít neviditelné tlačítko, které se bude absolutně pozicovat přes video. To by nemusel být takový problém, jenže celá stránka je responzivní, což znamená, že tlačítko nemůže mít pevně nastavenou pozici. Tak jsem poměrně dlouho studoval API od HTML5 videa a snažil se přijít na nejlepší možné řešení, aby se dalo aplikovat na ostatní videa.

Konečné řešení se dalo vyřešit v těchto bodech

  1. Vložíme HTML kód pro přidání videa:
  2. Teď musíme nadefinovat dvě funkce, které budou potřeba pro umístění tlačítka do videa:
  3. Zbývá jen nastavit event, který bude hlídat současný stav videa a podle času bude určovat, jestli má zobrazit tlačítko a na jaké pozici:
  4. Celý kontejner s videem by se měl zobrazit po kliknutí na jedno tlačítko. Popsaná akce na zobrazení videa je zde:
  5. Při zavírání kontejneru s videem je potřeba nezapomenout zastavit interval na kontrolu času videa:
  6. Po dokončení všech kroků se od klienta dozvíme, že by rád použil místo nativního HTML5 přehrávače službu Wistia a můžeme se pustit do přepisování… super!

Napsat komentář

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