Share
I den här handledningen ska jag förklara hur du kan "lata lasta" flera inbäddade YouTube-videor. Om du gör det kommer du att förbättra prestanda för vår första sidladdning och ge lite ström över till användaren.
Bädda in en Youtube-video har blivit en helt vanlig process för alla som är involverade i webben; kopiera, klistra in, gjort. Att dra in en extern resurs som en Youtube-video kan dock sakta ner en webbläsares prestanda, speciellt om det finns två eller flera videoklipp inbäddade på samma sida.
Genom att bädda in videor begär vi mer än bara en videofil. Ett antal resurser hämtas, inklusive JavaScript-filer, ett stilark, bilder och annonser. Och som du kan från skärmdumpen nedan motsvarar två Youtube-videor 22 HTTP-förfrågningar med totalt 624kb nedladdade. Dessa siffror kommer att klättra när vi lägger in fler videor på sidan.
Totalt antal HTTP-förfrågningar som gjorts när inbäddning av två videoklippSå, istället för att ladda YouTube-videon så fort sidan laddas, kommer vi att dra och spela upp videon när användaren ber dig göra det. Denna metod är populärt känd som lat laddning-det kommer att minimera HTTP-förfrågningarna vid första sidladdning och förbättra sidans prestanda.
Utan ytterligare ado, låt oss komma igång.
Vi börjar med att bygga HTML. Detta är rakt framåt; Vi använder bara två div element. Den första div kommer att linda runt den inbäddade Youtube-videon, den andra div är näst i den första div, och vi använder den för att forma Spela knappen för att illustrera att detta är en spelbar video.
Som du kan se från ovanstående kodbit, har vi lagt till en klass till dessa div element och a data- attribut till den första div att ange ID-en för Youtube-videon som vi ska bädda in.
Därefter lägger vi till stilar:
.youtube bakgrundsfärg: # 000; marginalbotten: 30px; position: relativ; padding-top: 56,25%; överflöde: gömd; markör: pekare; .youtube img bredd: 100%; topp: -16,84%; vänster: 0; opacitet: 0,7; .youtube .play-button width: 90px; höjd: 60px; bakgrundsfärg: # 333; boxskugga: 0 0 30px rgba (0,0,0,0,6); z-index: 1; opacitet: 0,8; gränsstråle: 6px; .youtube .play-button: före innehåll: ""; gränsstil: fast; kantbredd: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; .youtube img, .youtube .play-button cursor: pointer; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button: före position: absolute; .youtube .play-button, .youtube .play-button: före top: 50%; vänster: 50%; transformera: translate3d (-50%, -50%, 0); .youtube iframe höjd: 100%; bredd: 100%; topp: 0; vänster: 0;
Dessa stilar handlar huvudsakligen om:
Accentsconagua
padding-top av den första div till 56,25%. Detta tal är härledt från att dividera 9 till 16 och multiplicera den resulterande till 100%.div till en spellknapp och placera den i mitten av den första div.Vid denna tidpunkt borde vi se dessa div elementen börjar likna en vanlig online videospelare, enligt följande:
Om du klickar på uppspelningsknappen spelas ingen video. Det är en bild. Låt oss skriva skript för att hämta miniatyrbilden för bild baserat på det Youtube-ID som lagts till i data embed attribut. I slutändan kommer det också att bädda in och spela upp videon på användarklickan.
För att starta det väljer vi div element som kommer att pakka in den inbäddade videon de medYoutube klass.
var youtube = document.querySelectorAll (".youtube"); Eftersom vi kanske har två eller flera Youtube-videor måste vi sedan iterera genom vart och ett av de valda elementen:
... för (var i = 0; i < youtube.length; i++) // add the code here
Därefter kommer vi hämta Youtube miniatyrbilden och visa den. Youtube genererar flera bildstorlekar, var och en är tillgänglig via följande webbadresser:
http://img.youtube.com/vi/video-id/mqdefault.jpg (320 × 180 pixlar)http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480 × 360 pixlar)http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640 × 480 pixlar)http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920 × 1080 pixlar)Observera att vi behöver motsvarande Youtube-video-ID för att lägga till URL-adressen. Vi har angivit ID: n i data, och vi kan hämta det med hjälp av JavaScript .dataset fast egendom.
// loop för (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 från ovanstående kod kommer vi att visa sdstandard.jpg bild, eftersom de flesta filmer idag kommer i standarddefinition (SD). Kommer in på 640 × 480 pixlar, är den här miniatyrbilden bara i rätt storlek; inte för liten eller för stor. Du kan välja högkvalitativ miniatyrbild, maxresdefault.jpg, istället, men kom ihåg att Youtube-video inte alltid kommer i HD-definition (HD), så den här storleken kanske inte alltid är tillgänglig.
Om du laddar miniatyrbilden somynkroniseras kan sidan laddas snabbare. Om vi har två eller flera inbäddade Youtube-videor laddas varje bildminnebild av dessa videoklipp samtidigt som de inte förhindrar sidflödet:
// loop för (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 ) );
Denna kod laddar miniatyrbilden från källa variabel. När den är laddad lägger vi den till omslaget div:
Paus Fest 2016 Kickoff på Envato. Fortfarande en bild.Slutligen lägger vi till det sista stycket av manuset.
// loop för (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 ); );
Detta skript gör specifikt följande saker:
klick händelse till omslaget div samt utföra den anonyma funktionen som bifogas.iframe element; vi skapar en liknande iframe som Youtube genererar för att bädda in en video, förutom att vi nu sätter in autoplay = 1 i webbadressen för att omedelbart spela upp videon när iframe är inställd.div innehåll med iframe.Vi är redo. Du kan ge följande demonstration ett försök!
I denna handledning lärde vi oss hur du laddar upp en Youtube-video på användarens klick. Detta är snabbare och mer bandbreddseffektivt än att behöva dra videor direkt vid sidan av sidlastning, speciellt om du har flera videoklipp inbäddade på en enda sida.
Och som du kan se från följande skärmdump, har vi gjort en betydande förbättring i termen av antalet HTTP-förfrågningar som gjorts under den första sidbelastningen. I det här fallet har vi trimmat ner det från 22 till 5 HTTP-förfrågningar.
I nästa handledning förbättrar vi vår kod genom att lägga in den som en "webbkomponent". Om vi gör det kan vi bädda in Youtube-videon mer elegant genom ett eget namn. I stället för att lägga till två div element som vi gjorde i denna handledning, kan vi helt enkelt lägga till, till exempel,
