Share
I denne opplæringen vil jeg forklare hvordan du "lat last" flere innebygde YouTube-videoer. Å gjøre det, vil forbedre ytelsen til vår første sidebelastning, og gi litt strøm til brukeren.
Embedding av en Youtube-video har blitt en helt normal prosess for alle som er involvert i nettet; kopiere, lime inn, ferdig. Hvis du trekker inn en ekstern ressurs som en Youtube-video, kan det imidlertid redusere en nettsideens ytelse, spesielt hvis det er to eller flere videoer som er innebygd på samme side..
Ved å legge inn videoer, ber vi mer enn bare en videofil. En rekke ressurser hentes, inkludert JavaScript-filer, et stilark, bilder og annonser. Og som du kan fra skjermbildet nedenfor, er to Youtube-videoer tilsvarer 22 HTTP-forespørsler med totalt 624 kb nedlastet. Disse tallene vil klatre når vi legger inn flere videoer på siden.
Totalt antall HTTP-forespørsler som er gjort når du legger inn to videoerSå, i stedet for å laste inn Youtube-videoen så snart siden laster, skal vi trekke og spille av videoen når brukeren ber om å gjøre det. Denne metoden er populært kjent som lat lasting-det vil minimere HTTP-forespørsler på første sidebelastning, og til slutt forbedre sidens ytelse.
Uten videre, la oss komme i gang.
Vi begynner med å bygge HTML-koden. Dette er rett fram; vi bruker bare to div elementer. Den første div vil vikle rundt den innebygde Youtube-videoen, den andre div er nestet i den første div, og vi vil bruke den til å forme Spille knappen for å illustrere at dette er en spillbar video.
Som du kan se fra kodestykket ovenfor, har vi lagt til en klasse til disse div elementer og a data- attributt til den første div å spesifisere IDen til Youtube-videoen vi vil legge inn.
Deretter legger vi til stilene:
.youtube bakgrunnsfarge: # 000; margin-bunn: 30px; stilling: relativ; polstringstopp: 56,25%; overløp: skjult; markør: pointer; .youtube img bredde: 100%; topp: -16,84%; venstre: 0; opasitet: 0,7; .youtube .play-button width: 90px; høyde: 60px; bakgrunnsfarge: # 333; boks-skygge: 0 0 30px rgba (0,0,0,0,6); z-indeks: 1; opasitet: 0,8; border-radius: 6px; .youtube .play-button: før innhold: ""; border-style: solid; kantbredde: 15px 0 15px 26.0px; border-farge: gjennomsiktig gjennomsiktig transparent #fff; .youtube img, .youtube .play-button cursor: pointer; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button: før posisjon: absolutt; .youtube .play-button, .youtube .play-button: før topp: 50%; venstre: 50%; transformere: translate3d (-50%, -50%, 0); .youtube iframe høyde: 100%; bredde: 100%; topp: 0; venstre: 0;
Disse stilene handler hovedsakelig om:
Accentsconagua
padding-top av den første div til 56.25%. Dette tallet er avledet fra å dele 9 ved 16 og multiplisere den resulterende til 100%.div til en spilleknapp og plassere den til midten av den første div.På dette tidspunktet bør vi se disse div elementene begynner å ligne en typisk online videospiller, som følger:
Hvis du klikker på avspillingsknappen, spilles ikke en video. Det er et bilde. La oss skrive skript for å hente bildeminiatyret basert på Youtube-IDen som ble lagt til i data-innbygging Egenskap. Til slutt vil det også legge inn og spille videoen på brukerens klikk.
For å starte det, velger vi div elementer som vil pakke inn den innebygde videoen; de medyoutube klasse.
var youtube = document.querySelectorAll (".youtube"); Siden vi kan ha to eller flere Youtube-videoer, må vi deretter iterere gjennom hvert av de valgte elementene:
... for (var i = 0; jeg < youtube.length; i++) // add the code here
Deretter henter vi Youtube-miniatyrbildet og viser det. Youtube genererer flere bildestørrelser, hver som er tilgjengelig gjennom følgende nettadresser:
http://img.youtube.com/vi/video-id/mqdefault.jpg (320 × 180 piksler)http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480 × 360 piksler)http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640 × 480 piksler)http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920 × 1080 piksler)Legg merke til at vi trenger den tilsvarende Youtube-video-IDen for å legge til URL-adressen. Vi har angitt IDen i data, og vi kan hente den ved hjelp av JavaScript .datasett eiendom.
// loop for (var i = 0; i < youtube.length; i++) // thumbnail image source. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
Som du kan se fra koden ovenfor, vil vi vise sdstandard.jpg bilde, siden de fleste videoer i dag kommer i Standard Definition (SD). Kommer inn på 640 × 480 piksler, er dette bildet miniatyrbildet akkurat i riktig størrelse; ikke for liten eller for stor. Du kan velge for miniatyrbilde av høy kvalitet, maxresdefault.jpg, i stedet, men husk at Youtube-video ikke alltid kommer i HD-definisjon (HD), så denne størrelsen kan ikke alltid være tilgjengelig.
Lasting av miniatyrbildet somynkront vil tillate at siden lastes raskere. Hvis vi har to eller flere innebygde Youtube-videoer, vil hvert miniatyrbilde av disse videoene lastes samtidig slik at de ikke forhindrer sidedriverflyten:
// loop for (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 ) );
Denne koden vil laste bilde miniatyrbildet fra kilde variabel. Når den er lastet, legger vi den til omslaget div:
Pause Fest 2016 Kickoff på Envato. Fortsatt et bilde.Til slutt legger vi til det siste stykket av skriptet.
// loop for (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 ); );
Dette skriptet gjør spesielt følgende:
klikk hendelse til omslaget div samt utføre den anonyme funksjonen som er vedlagt.iframe element; vi lager en lignende iframe at Youtube genererer å legge inn en video, bortsett fra at vi nå setter inn automatisk avspilling = 1 i nettadressen for å umiddelbart spille av videoen når iframe er satt.div innhold med iframe.Vi er alle satt. Du kan prøve følgende demonstrasjon!
I denne opplæringen lærte vi hvordan du laster inn en Youtube-video på brukerens klikk. Dette er raskere og mer båndbreddeeffektiv enn å måtte trekke videoer direkte ved siden av siden, spesielt hvis du har flere videoer som er innebygd på en enkelt side.
Og som du ser fra følgende skjermdump, har vi gjort en betydelig forbedring i løpet av antall HTTP-forespørsler som ble gjort under den første sidelasten. I dette tilfellet har vi trimmet det ned fra 22 til 5 HTTP-forespørsler.
I den neste opplæringen forbedrer vi koden vår ved å pakke den inn som en "Webkomponent". Dette gjør at vi kan legge inn Youtube-videoen mer elegant gjennom et egendefinert navnelement. Istedenfor å legge til to div elementer som vi gjorde i denne opplæringen, kan vi bare legge til, for eksempel,
