Zpožděně načítáné YouTube video

Máme-li na stránce více videí vložených například pomocí <iframe> z YouTube, značně to načítání zpomalí. Jeden takový <iframe> je cca 7 HTTP požadavků a 0,5 MB dat, což může načítání webu na mnoho tisíců milisekund otrávit.

Řešení

Co takhle místo <iframe> zobrazit obrázek videa, přidat nějaké atrapy ovládacích prvků skutečného přehrávače – a ten zobrazit až po najetí myší (onmouseover)?

Náhledy

Obrázek (náhled) videa lze získat překvapivě snadno. Různé varianty obrázku videa se nacházejí na jednotných URL, kam stačí zadat jenom kód videa (to je část za wathc?v=: youtube.com/watch?v=m_t4_6eHFdk).

miniaturní náhledy
http://img.youtube.com/vi/m_t4_6eHFdk/1.jpg

Generují se tři (začátek, prostředek a konec), tj čísla na konci 1–3. O rozměrech 120 × 90 pixelů.

náhledy v různých velikostech

320 × 180

http://img.youtube.com/vi/m_t4_6eHFdk/mqdefault.jpg

480 × 360

http://img.youtube.com/vi/m_t4_6eHFdk/hqdefault.jpg

640 × 480

http://img.youtube.com/vi/m_t4_6eHFdk/sddefault.jpg

Rozměry podle maximálního rozlišení videa

http://img.youtube.com/vi/m_t4_6eHFdk/maxresdefault.jpg

Náhledy pomocí API

Alternativní možnost k těmto adresám je získání URL obrázků pomocí YouTube API. Těžko ale soudit, co bude trvanlivější… Nicméně obrázky jsou zatím alespoň jednodušší na realisaci.

Živá ukázka a řešení

V HTML a kaskádových stylech se vytvoří atrapa. JavaScript ji potom prohodí za skutečný přehrávač videa.

HTML by mohlo vypadat takto:

<div class='yt' style='background: #000 url("http://img.youtube.com/vi/m_t4_6eHFdk/sddefault.jpg") center 65%'>
	<a onmouseover='yt(this)' href='http://www.youtube.com/watch?v=m_t4_6eHFdk'><span>Název videa</span></a>
</div>

V CSS se potom vytvoří atrapa ovládacího prvku (pomocí obrázku).

Naposicuje se dolů a název videa ve <span>u v odkazu zase nahoru.

Nakonec JavaScript zajistí, aby se v div.yt vytvořil <iframe> s videem a atrapa v podobě odkazu zmizela.

function yt(video) {
	var ifr = document.createElement("iframe");
	ifr.width = 640;
	ifr.height = 385;
	ifr.src = video.href.replace("watch?v=", "embed/");
	video.parentNode.appendChild(ifr);
	video.parentNode.removeChild(video);
}

Automatisace

Asi by se nikomu nechtělo vkládat ručně výše uvedené HTML, proto jsou dvě možnosti:

  1. Na straně serveru při vložení URL na YouTube ji nahradit upravenou HTML skořápkou. (Nahrazení by nemělo být v žádném případě trvalé.)
  2. Vkládat YT videa jako běžné odkazy, JavaScriptem je najít, doplnit jim skořápku a navěsit funkci yt.

    Hotové řešení

Kromě toho by serverový skript mohl zajišťovat stažení náhledového obrázku z YT na vlastní server.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Automatický lazy-loading YouTube videí

Hotové řešení lazy-loadingu YouTube videí

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

Vložení videa z Facebooku

Vložení videa z Facebooku na web

Jak na vlastní stránku vložit video z Facebooku.

Náhledy videa

Více náhledů videa

Jak při najetí myší na náhled videa zobrazovat další náhledy.

Jak vložit YouTube video

Vložení videa z YouTube

Jak přidat na svou stránku video ze serveru YouTube s HTML 5 přehrávačem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře