Share
In deze tutorial leg ik uit hoe je "meerdere ingelogde YouTube-video's" lui laadt. Als u dit doet, worden de prestaties van de eerste pagina's beter geladen en krijgt de gebruiker enige macht over.
Het embedden van een Youtube-video is een volkomen normaal proces geworden voor iedereen die zich met internet bezighoudt; kopiëren, plakken, klaar. Als een externe bron wordt opgehaald, zoals een YouTube-video, kunnen de laadprestaties van een webpagina echter vertragen, vooral als er twee of meer video's op dezelfde pagina zijn ingesloten.
Door video's in te sluiten, vragen we om meer dan alleen een videobestand. Een aantal bronnen wordt opgehaald, inclusief JavaScript-bestanden, een stylesheet, afbeeldingen en advertenties. En zoals je kunt zien aan de onderstaande schermafbeelding, zijn twee YouTube-video's gelijk aan 22 HTTP-verzoeken met een totaal van 624 KB gedownload. Deze nummers zullen stijgen naarmate we meer video's op de pagina insluiten.
Totaal aantal HTTP-verzoeken dat is gemaakt bij het insluiten van twee video'sDus in plaats van het laden van de YouTube-video zodra de pagina wordt geladen, gaan we de video trekken en afspelen wanneer de gebruiker hierom vraagt. Deze methode is in de volksmond bekend als trage voortgang-het minimaliseert de HTTP-verzoeken bij het laden van de eerste pagina en verbetert uiteindelijk de prestaties van de pagina.
Zonder verder oponthoud gaan we aan de slag.
We beginnen met het bouwen van de HTML. Dit is eenvoudig; we gebruiken er slechts twee div elementen. De eerste div zal zich om de ingesloten YouTube-video wikkelen, de tweede div is genest in de eerste div, en we zullen het gebruiken om de Spelen om te illustreren dat dit een speelbare video is.
Zoals u kunt zien in het bovenstaande codefragment, hebben we een toegevoegd klasse naar deze div elementen en een gegevens- toeschrijven aan de eerste div om de ID van de YouTube-video op te geven die we zullen insluiten.
Vervolgens voegen we de stijlen toe:
.youtube background-colour: # 000; margin-bottom: 30px; positie: relatief; opvulmateriaal: 56,25%; overloop verborgen; cursor: pointer; .youtube img width: 100%; top: -16,84%; links: 0; opaciteit: 0,7; .youtube .play-button width: 90px; hoogte: 60 px; achtergrondkleur: # 333; vakschaduw: 0 0 30px rgba (0,0,0,0.6); z-index: 1; opaciteit: 0,8; grensradius: 6px; .youtube .play-button: before content: ""; randstijl: stevig; grensbreedte: 15px 0 15px 26.0px; randkleur: transparant transparant transparant #fff; .youtube img, .youtube .play-button cursor: pointer; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button: before position: absolute; .youtube .play-button, .youtube .play-button: before top: 50%; links: 50%; transform: translate3d (-50%, -50%, 0); .youtube iframe height: 100%; breedte: 100%; boven: 0; links: 0;
Deze stijlen hebben voornamelijk betrekking op:
Accentsconagua
padding-top van de eerste div naar 56.25%. Dit getal is afgeleid van 9 door 16 en vermenigvuldigt het resultaat met 100%.div naar een afspeelknop en plaats deze in het midden van de eerste div.Op dit punt zouden we deze moeten zien div elementen beginnen te lijken op een typische online videospeler, als volgt:
Als u op de knop Afspelen klikt, wordt geen video afgespeeld. Het is een afbeelding. Laten we scripts schrijven om de miniatuurafbeelding op te halen op basis van de YouTube-ID die is toegevoegd in de data-embed attribuut. Uiteindelijk zal het ook de video insluiten en afspelen zodra de gebruiker klikt.
Om het te starten, selecteren we de div elementen die de ingesloten video omwikkelen; degenen met deyoutube klasse.
var youtube = document.querySelectorAll (".youtube"); Omdat we misschien twee of meer YouTube-video's hebben, moeten we alle geselecteerde elementen doorlopen:
... voor (var i = 0; i < youtube.length; i++) // add the code here
Vervolgens halen we de miniatuur van de YouTube-afbeelding op en geven deze weer. YouTube genereert meerdere afbeeldingsformaten, elk toegankelijk via de volgende URL's:
http://img.youtube.com/vi/video-id/mqdefault.jpg (320 x 180 pixels)http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480 × 360 pixels)http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640 × 480 pixels)http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920 x 1080 pixels)Merk op dat we de bijbehorende YouTube-video-ID nodig hebben om toe te voegen aan de URL. We hebben de ID opgegeven in gegevens, en we kunnen het ophalen met behulp van JavaScript .dataset eigendom.
// lus voor (var i = 0; i < youtube.length; i++) // thumbnail image source. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
Zoals je kunt zien aan de hand van de bovenstaande code, zullen we laten zien sdstandard.jpg afbeelding, aangezien de meeste video's vandaag de dag in Standard Definition (SD) staan. Deze afbeeldingsminiatuur komt op 640 × 480 pixels en heeft precies de juiste maat; niet te klein, niet te groot. U kunt kiezen voor de hoogwaardige miniatuurafbeelding, maxresdefault.jpg, in plaats daarvan, maar houd er rekening mee dat YouTube-video's niet altijd in High-definition (HD) komen, dus dit specifieke formaat is mogelijk niet altijd beschikbaar.
Door de beeldminiatuur asynchroon te laden, kan de pagina sneller worden geladen. Als er twee of meer ingesloten YouTube-video's zijn, wordt elke miniatuur van deze video's tegelijk geladen, zodat ze de stroom van paginastreaming niet voorkomen:
// lus voor (var i = 0; i < youtube.length; i++) … // Load the image asynchronously var image = new Image(); image.src = source; image.addEventListener( "load", function() youtube[ i ].appendChild( image ); ( i ) );
Deze code laadt de miniatuur van de afbeelding van de bron variabel. Zodra het is geladen, voegen we het bij de wrapper div:
Pauzeer Fest 2016 Kickoff bij Envato. Nog steeds een afbeelding.Ten slotte voegen we het laatste stukje van het script toe.
// lus voor (var i = 0; i < youtube.length; i++) … youtube[i].addEventListener( "click", function() var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); );
Dit script doet specifiek de volgende dingen:
Klik evenement naar de verpakking div evenals het uitvoeren van de anonieme functie gekoppeld.iframe element; we creëren een soortgelijke iframe die de YouTube genereert om een video in te sluiten, behalve dat we nu de autoplay = 1 in de URL om de video onmiddellijk af te spelen wanneer de iframe is ingesteld.div inhoud met de iframe.We zijn er allemaal klaar voor. Je kunt de volgende demo proberen!
In deze zelfstudie hebben we geleerd hoe je een YouTube-video laadt na de klik van de gebruiker. Dit is sneller en een bandbreedte-efficiëntere manier dan direct video's te moeten overnemen naast het laden van de pagina, vooral als je meerdere video's hebt ingesloten op één pagina.
En zoals u kunt zien aan de hand van de volgende schermafbeelding, hebben we een aanzienlijke verbetering aangebracht in de duur van het aantal HTTP-aanvragen dat is gedaan tijdens de eerste pagina's. In dit geval hebben we het ingekort van 22 tot 5 HTTP-verzoeken.
In de volgende zelfstudie verbeteren we onze code door deze als een 'webcomponent' in te pakken. Als we dit doen, kunnen we de YouTube-video op een meer elegante manier insluiten via een aangepast element met de naam. In plaats van er twee toe te voegen div elementen zoals we in deze tutorial hebben gedaan, kunnen we eenvoudig toevoegen, bijvoorbeeld,
