YouTube videa: Postupné načítání při scrollu

 |  Tvorba WWW  |  1 058x
_

Dnes si příklad z minulého článku rozšíříme o další funkcionalitu. Sám jsem dlouho hledal řešení, jak zamezit zbytečnému kousání stránek, které obsahují větší množství vložených videí. Chtěl jsem možnost přehrání uvnitř článku, ale už se mi tolik nelíbilo, jak se všechno musí dopředu zbytečně načítat. Řešení je vcelku triviální a sám už jsem ho mnohokrát použil v jiných případech: daný obsah načteme až po zascrollování. Jak vše uvést do praxe vysvětlím právě v dnešním článku.

JavaScript si rozšíříme o jednu funkci. Upravíme i regulární výraz pro náhradu iframu vlastním blokem kódu. Iframe je totiž stylovatelný jako každý jiný prvek a toho využijeme. Opět musím zdůraznit, že by to šlo i jinak, přidáním dalších elementů, ale není to nutné. Můžeme využít to, co máme.

Základem je, aby se jednotlivým iframům vytiskl prázdný atribut "src". Dokud není zdroj, nic se nenačítá. Zdroj si dočasně uložíme do titulku, který potom přes JavaScript vyměníme. Atributy vyměníme ve chvíli, kdy uživatel na video zascrolluje.

1. JavaScript

Funkce je opět trochu zjednodušená: počítáme jen, jak daleko je zascrollováno. Pokud je video na stránce výš, než je spočtená hodnota, proběhne náhrada a jeho načtení. Toto řešení má výhodu v obrovské jednoduchosti, nevýhodu pak v tom, že když na konci stránky stiskneme F5, bude se načítat samozřejmě všechno. Ale o výpočtu viditelného okna z obou stran tento článek není a daná funkce pro svůj účel postačí.

Nesmíme ani zapomenout na její opětovné volání při resizu okna, protože u responzivních webů se hodnoty po resizu mohou (a měly by) změnit.

$.fn.showWhenScrolled=function(){
	var self = this;
	
	this.init = function(){
		self.each(function(){
			var self_top   = $(this).offset().top;
			var scroll_top = $(window).scrollTop();
			var win_height = $(window).height();
			var frame      = $(this).find('iframe');
			if(scroll_top > (self_top - win_height)){
				if(!frame.attr('src')){
					frame.attr({src:frame.attr('title')});
				}
			}
		});
	};
	
	$(window).scroll(function(){
		self.init();
	}).resize(function(){
		self.init();
	});
	
	self.init();
};

$('.youtube-container').showWhenScrolled();

2. CSS

Do stylu přidáme jediný řádek, a to vzhled prázdného rámu.

.youtube-container iframe {background:rgba(0,0,0,0.25) url(youtube-loading.gif) no-repeat 50% 50%;}

3. HTML / PHP

Na závěr musíme upravit i způsobe renderování, aby se mohl atribut "src" rovnou vyměnit s titulkem.

$youtube_replace_pattern = '
	<span class="youtube-container">
		<a href="javascript:;">
			<img src="images/youtube-resizer.png" alt="" class="youtube-resizer" />
			<img src="images/youtube-resizer-tablet.png" alt="" class="youtube-resizer tablet-resizer" />
		</a><iframe $1 src="" title="$2" $3></iframe>
	</span>
';

$article_text = preg_replace('/\<iframe([^>]+)src="([^"]*)"([^>]+)><\/iframe>/', $youtube_replace_pattern, $article_text);

Ukázka v praxi

Jako ukázku jsem si připravil část jednoho ze svých článků. Zkuste si různě refreshovat, resizovat, scrollovat a uvidíte, jakým způsobem to všechno pracuje.

YouTube progressive load ukázka
YouTube progressive load ke stažení

Facebook Twitter Google+

Komentáře k článku "YouTube videa: Postupné načítání při scrollu"

Gravatar
Roman Janko 30. 4 2018, 10:29
1/5 Pondělí 30. Dubna 2018, 10:29  |  Chrome, Windows

Tvuj "plugin" má zásadní nevýhodu. A tou je kontrolovaný viewport, mělo by být kontrolováno skutečně jen to co je vidět a ne to co je nad tebou ..

Lepší řešení: https://github.com/eisbehr-/jquery.lazy

Gravatar
Roman Janko 30. 4 2018, 10:32
2/5 Pondělí 30. Dubna 2018, 10:32  |  Chrome, Windows

Dále makety obrázků jsou zbytečné, stačí obalu nastavit nulovou výšku a padding bottom v poměru 16:9. Ten regulár je taky zbytečný, všechno se dá nasypat do data atributů a poté jen snadno vyměnit. Celkově to není nic moc ;-) a navíc ten plugin je napsaný taky divně, takhle jsem žádný plugin ještě napsaný neviděl. (Neuvyužívá žádný známý pattern a je to zabalené do pluginu; jen tak aby se neřeklo).

Gravatar
Mike 30. 4 2018, 11:10
3/5 Pondělí 30. Dubna 2018, 11:10  |  Opera, Windows 8.1

díky za komentář.

že se má načítat jen viditelná oblast, v tom máš naprostou pravdu.

makety nahraditelné za padding bottom jsou, ale mně se to lépe styluje tímto způsobem. výhoda je, že se dají nahradit za skutečné náhledy videa, které ho pak zobrazí v přesném poměru stran (a nikoli ve fixním 16:9) což já teď sice mám, ale rozšíření tímto směrem je přes reálné obrázky jednodušší.

data atributy použitelné jsou, jenže v takovém případě bych si musel rozšiřovat i administraci - aby mi generovala požadovaný kód. takhle dám jenom copy+paste linku z youtube a dál už o to postará regulár.

s divně napsaným pluginem máš také pravdu :-) ale je to 27 řádků kódu, proč to dělat zbytečně složité. výhoda je, že to pochopí i naprostý začátečník. (což je vlastně cílem, aby to bylo jednoduché).

Gravatar
Roman Janko 30. 4 2018, 12:00
4/5 Pondělí 30. Dubna 2018, 12:00  |  Chrome, Windows

Ahoj, s tím poměrem, nemusí to být samozřejmě vždy 16:9 (to jsou hlavně YT videa); je to aplikovatelné na všechno, např. tady jsem si dělal lazy loading obrázků, s různými poměry http://lab.rjwebdesign.cz/lazy-with-responsive-images/ (http://lab.rjwebdesign.cz/lazy-with-responsive-images/src.phps)

To s tou administrací a regulárem moc nechápu. Regulár bude vždycky o dost pomalejší, toť jednak, pro začátečníka hůře stravitelný. Připravit si všechno do data-atributů (tj url youtubu, titulek videa atd, to je přeci otázka šablona a 1 řádku navíc ne?).

Add plugin, není třeba to dělat složitě, ale spíš správně, tak nějak tě to nutí psát kód tak; aby byl rozšiřitelný a splňoval nějaké standardy (zrovna Tobě to vysvětlovat nemusím, kór když se podívám na nějaké tvoje PHP články, ale u JQ sis tu práci nedal ;-).

Můj první a zároveň poslední JQ plugin: https://github.com/Kcko/aw-select taky to není bůhvíco, ale snažil jsem se tam o cosi.

Nicméně ted se píší pluginy jinak bud vyloženě method patternem viz https://github.com/wbotelhos/raty nebo prototypováním (tj Vanilla JS), https://github.com/wbotelhos/raty


PS. Prosímtě neber to jakou nějakou přehnanou kritiku, jen jsem si všiml nějakých nedostatků a chtěl jsem na to upozornit, pokud nepoužiji přehršel smajlíků; vyzní to skoro až ošklivě.

Gravatar
Mike 30. 4 2018, 13:54
5/5 Pondělí 30. Dubna 2018, 13:54  |  Opera, Windows 8.1

vůbec to neberu jako přehnanou kritiku, naopak jsem rád, že sis našel čas k věcnému komentáři :-)

ohledně pluginu máš pravdu. no ono to ani nebylo myšleno jako skutečný "plugin", ale prostě jenom zjednodušení zápisu volání. ale asi i tady by to chtělo dodržet nějaká základní pravidla, no je to tak.

co se týče reguláru - myšlenka je taková : vlezu na youtube, kliknu vložit a dostanu třeba kód :

<iframe width="560" height="315" src="https://www.youtube.com/embed/9q5g7Y3C5nk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

ten si vložím do administrace do textového pole a nechci už to dál řešit. proto replace na frontendu. lepší řešení by bylo vložení nějaké značky, ktera se nahradí přes rychlejší str_replace. jenže tu bych si musel pamatovat - nebo si rozšířit editor o tlačítko, které mi tento tag vloží.

to jsem myslel tou administrací. prostě když plním video do článku, klik klik a jsem hotový.

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua