Share
În acest tutorial vă voi explica cum să încărcați leneș multiple videoclipuri încorporate în YouTube. Procedând astfel, vom îmbunătăți performanța încărcării inițiale a paginii noastre și vom transmite o anumită putere utilizatorului.
Încorporarea unui videoclip YouTube a devenit un proces normal pentru oricine este implicat în web; copiați, lipiți, terminați. Cu toate acestea, tragerea unei resurse externe, cum ar fi un videoclip YouTube, poate încetini performanța de încărcare a unei pagini web, mai ales dacă există două sau mai multe videoclipuri încorporate pe aceeași pagină.
Prin încorporarea videoclipurilor solicităm mai mult decât un fișier video. Sunt strânse mai multe resurse, inclusiv fișiere JavaScript, o foaie de stil, imagini și anunțuri. Și după cum puteți vedea din ecranul de mai jos, două videoclipuri Youtube sunt egale cu 22 de solicitări HTTP cu un total de 624kb descărcate. Aceste numere vor urca pe măsură ce încorporăm mai multe videoclipuri pe pagină.
Numărul total de solicitări HTTP efectuate la încorporarea a două videoclipuriDeci, în loc să încărcați videoclipul YouTube imediat ce pagina se încarcă, vom trage și vom reda videoclipul atunci când utilizatorul va cere acest lucru. Această metodă este cunoscută sub numele de leneș de încărcare-va reduce la minimum solicitările HTTP la încărcarea inițială a paginii și, în cele din urmă, va îmbunătăți performanța paginii.
Fără să mai vorbim, să începem.
Începem cu construirea codului HTML. Acest lucru este drept înainte; folosim doar două div elemente. Primul div va înfășura în jurul video încorporat Youtube, al doilea div este imbricata in prima div, și o vom folosi pentru a modela Joaca pentru a ilustra că acesta este un videoclip care poate fi redat.
După cum puteți vedea din fragmentul de cod de mai sus, am adăugat o clasă acestora div elemente și a date- atribut la primul div pentru a specifica ID-ul videoclipului YouTube pe care îl vom încorpora.
Apoi, adăugăm stilurile:
.youtube background-color: # 000; margin-bottom: 30px; poziție: relativă; padding-top: 56,25%; overflow: ascuns; cursor: pointer; .youtube img lățime: 100%; top: -16,84%; stânga: 0; opacitate: 0,7; .youtube .play-butonul width: 90px; înălțime: 60px; fundal-culoare: # 333; box-shadow: 0 0 30px rgba (0,0,0,0,6); z-index: 1; opacitate: 0,8; raza de graniță: 6px; .youtube .play-buton: înainte de content: ""; stilul frontal: solid; lățimea frontală: 15px 0 15px 26.0px; culoare-culoare transparentă transparent transparent #fff; .youtube img, .youtube .play-button cursor: pointer; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-buton: înainte de position: absolute; .youtube .play-button, .youtube .play-buton: înainte de top: 50%; stânga: 50%; transformare: traducere3d (-50%, -50%, 0); .outube iframe înălțime: 100%; lățime: 100%; top: 0; stânga: 0;
Aceste stiluri se referă în principal la:
Accentsconagua
padding-top din primul div la 56,25%. Acest număr este derivat din împărțirea între 9 și 16 și multiplicarea rezultatului la 100%.div la un buton de redare și poziționarea acestuia în centrul primului div.În acest moment, ar trebui să vedem aceste lucruri div elementele încep să semene cu un player video online tipic, după cum urmează:
Dacă faceți clic pe butonul de redare, nu se va reda un videoclip. Este o imagine. Să scriem scripturi pentru a prelua miniatura imaginii pe baza ID-ului Youtube adăugat în date-Încorporați atribut. În cele din urmă, acesta va încorpora și va reda videoclipul la clic pe utilizator.
Pentru ao porni, vom selecta div elemente care vor înfășura videoclipul încorporat; cele cuyoutube clasă.
var youtube = document.querySelectorAll (".youtube"); Deoarece am putea avea două sau mai multe videoclipuri Youtube, va trebui să repetăm fiecare dintre elementele selectate:
... pentru (var i = 0; i < youtube.length; i++) // add the code here
Apoi, vom recupera imaginea de pe YouTube și vom afișa. Youtube generează mai multe dimensiuni de imagine, fiecare fiind accesibilă prin următoarele adrese URL:
http://img.youtube.com/vi/video-id/mqdefault.jpg (320 × 180 pixeli)http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480 × 360 pixeli)http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640 × 480 pixeli)http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920 × 1080 pixeli)Observați că avem nevoie de ID-ul video Youtube corespunzător pentru a adăuga la adresa URL. Am specificat ID-ul în date, și suntem capabili să-l preluăm utilizând JavaScript .date CCD proprietate.
// bucla pentru (var i = 0; i < youtube.length; i++) // thumbnail image source. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
După cum puteți vedea din codul de mai sus, vom arăta sdstandard.jpg imagine, deoarece majoritatea videoclipurilor vin astăzi în Standard Definition (SD). Venind la 640 × 480 pixeli, această miniatură de imagine are doar dimensiunea potrivită; nu prea mic, nici prea mare. Puteți opta pentru imaginea miniaturală de înaltă calitate, maxresdefault.jpg, în schimb, rețineți că videoclipul Youtube nu vine întotdeauna în format High-definition (HD), deci această dimensiune poate să nu fie întotdeauna disponibilă.
Încărcarea miniaturii de imagini asincron va permite încărcarea mai rapidă a paginii. În cazul în care avem două sau mai multe videoclipuri încorporate în Youtube, fiecare miniatură de imagine a acestor videoclipuri va fi încărcată simultan, astfel încât să nu împiedice fluxul de redare a paginilor:
// bucla pentru (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 ) );
Acest cod va încărca miniatura imaginii din sursă variabil. Odată ce este încărcat, îl adăugăm la ambalaj div:
Pause Fest 2016 Kickoff la Envato. Încă o imagine.În sfârșit, adăugăm ultima piesă a scenariului.
// bucla pentru (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 ); );
Acest script face în mod special următoarele lucruri:
clic eveniment la ambalaj div precum și executați funcția anonimă atașată.iframe element; noi creăm un mod similar iframe că Youtube generează pentru a încorpora un videoclip, cu excepția faptului că inserăm acum autoplay = 1 în URL-ul pentru a reda imediat video atunci când iframe este setat.div conținut cu iframe.Suntem cu toții pregătiți. Puteți încerca următorul demo!
În acest tutorial, am învățat cum să încărcați un videoclip Youtube după clicul utilizatorului. Acest lucru este mai rapid și un mod mai eficient de lățime de bandă decât să trebuiască să trageți videoclipuri direct de-a lungul încărcării paginilor, mai ales dacă aveți mai multe videoclipuri încorporate pe o singură pagină.
Și după cum puteți vedea din următoarea imagine de ecran, am făcut o îmbunătățire semnificativă în ceea ce privește numărul de cereri HTTP efectuate în timpul încărcării inițiale a paginii. În acest caz, l-am tăiat de la 22 la 5 solicitări HTTP.
În tutorialul următor, vom îmbunătăți codul nostru prin împachetarea acestuia ca "Componentă Web". Acest lucru ne va permite să încorporăm videoclipul YouTube mai elegant printr-un element numit personalizat. În loc să adăugați două div așa cum am făcut în acest tutorial, putem adăuga pur și simplu, de exemplu,
