Share
In questo tutorial spiegherò come "caricare pigro" più video di YouTube incorporati. Così facendo migliorerai le prestazioni del nostro caricamento iniziale della pagina e passeremo un po 'di potere all'utente.
Incorporare un video Youtube è diventato un processo completamente normale per chiunque sia coinvolto nel web; copia, incolla, fatto. Tuttavia, l'inserimento di una risorsa esterna come un video di YouTube può rallentare le prestazioni di caricamento di una pagina Web, soprattutto se sono presenti due o più video incorporati nella stessa pagina.
Incorporando i video richiediamo più di un semplice file video. Viene recuperata una serie di risorse, inclusi file JavaScript, un foglio di stile, immagini e pubblicità. E come puoi dallo screenshot qui sotto, due video di Youtube equivalgono a 22 richieste HTTP con un totale di 624kb scaricati. Questi numeri saliranno man mano che incorporiamo altri video nella pagina.
Numero totale di richieste HTTP effettuate durante l'incorporamento di due videoQuindi, invece di caricare il video di Youtube non appena la pagina viene caricata, tiriamo e riproduciamo il video quando l'utente chiede di farlo. Questo metodo è popolarmente conosciuto come carico pigro-ridurrà al minimo le richieste HTTP al caricamento iniziale della pagina e infine migliorerà le prestazioni della pagina.
Senza ulteriori indugi, iniziamo.
Iniziamo con la costruzione dell'HTML. Questo è semplice; ne stiamo usando solo due div elementi. Il primo div avvolgerà il video incorporato di Youtube, il secondo div è annidato nel primo div, e lo useremo per modellare il Giocare pulsante per illustrare che si tratta di un video riproducibile.
Come puoi vedere dallo snippet di codice precedente, abbiamo aggiunto a classe a questi div elementi e a dati- attributo al primo div per specificare l'ID del video Youtube che incorporeremo.
Successivamente, aggiungiamo gli stili:
.youtube background-color: # 000; margin-bottom: 30px; posizione: relativa; padding-top: 56,25%; overflow: nascosto; cursore: puntatore; .youtube img width: 100%; superiore: -16,84%; a sinistra: 0; opacità: 0,7; .youtube .play-button width: 90px; altezza: 60px; colore di sfondo: # 333; box-shadow: 0 0 30px rgba (0,0,0,0,6); z-index: 1; opacità: 0.8; border-radius: 6px; .youtube .play-button: before content: ""; border-style: solido; border-width: 15px 0 15px 26.0px; border-color: trasparente trasparente trasparente #fff; .youtube img, .youtube .play-button cursor: pointer; .youtube img, iframe .youtube, .youtube .play-button, .youtube .play-button: before position: absolute; .youtube .play-button, .youtube .play-button: before in alto: 50%; a sinistra: 50%; transform: translate3d (-50%, -50%, 0); .youtube iframe height: 100%; larghezza: 100%; inizio: 0; a sinistra: 0;
Questi stili riguardano principalmente:
Accentsconagua
padding-top del primo div a 56.25%. Questo numero deriva dalla divisione di 9 per 16 e moltiplica il risultante al 100%.div a un pulsante di riproduzione e posizionandolo al centro del primo div.A questo punto, dovremmo vederli div gli elementi iniziano a somigliare a un tipico lettore video online, come segue:
Facendo clic sul pulsante di riproduzione non verrà riprodotto un video. È un'immagine. Scriviamo script per recuperare la miniatura dell'immagine in base all'ID Youtube aggiunto in Dati-embed attributo. Infine, incorporerà e riprodurrà il video sul clic dell'utente.
Per avviarlo, selezioniamo il div elementi che avvolgeranno il video incorporato; quelli con ilYoutube classe.
var youtube = document.querySelectorAll (".youtube"); Dal momento che potremmo avere due o più video di Youtube, dovremo quindi scorrere tutti gli elementi selezionati:
... per (var i = 0; i < youtube.length; i++) // add the code here
Successivamente, recupereremo la miniatura dell'immagine di Youtube e la mostreremo. Youtube genera più dimensioni di immagine, ognuna accessibile tramite i seguenti URL:
http://img.youtube.com/vi/video-id/mqdefault.jpg (320 × 180 pixel)http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480 × 360 pixel)http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640 × 480 pixel)http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920 × 1080 pixel)Si noti che è necessario l'ID video Youtube corrispondente da aggiungere all'URL. Abbiamo specificato l'ID in dati, e siamo in grado di recuperarlo utilizzando il JavaScript .dataset proprietà.
// 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";
Come puoi vedere dal codice sopra, mostreremo sdstandard.jpg immagine, dal momento che la maggior parte dei video oggi sono disponibili in Definizione standard (SD). Con una risoluzione di 640 × 480 pixel, questa miniatura dell'immagine è della giusta dimensione; non troppo piccolo, né troppo grande. Puoi optare per l'immagine di anteprima di alta qualità, maxresdefault.jpg, invece, ma tieni presente che i video di YouTube non vengono sempre in alta definizione (HD), quindi questa particolare dimensione potrebbe non essere sempre disponibile.
Il caricamento della miniatura dell'immagine in modo asincrono consentirà il caricamento più veloce della pagina. Nel caso in cui siano presenti due o più video di YouTube incorporati, ciascuna miniatura dell'immagine di questi video verrà caricata simultaneamente in modo che non impediscano il flusso di rendering della pagina:
// 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 ) );
Questo codice caricherà la miniatura dell'immagine dal fonte variabile. Una volta caricato, lo aggiungiamo al wrapper div:
Pause Fest 2016 Kickoff a Envato. Ancora un'immagine.Infine, aggiungiamo l'ultimo pezzo della sceneggiatura.
// 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 ); );
Questo script fa specificamente le seguenti cose:
clic evento per il wrapper div così come eseguire la funzione anonima allegata.iframe elemento; creiamo un simile iframe che YouTube genera per incorporare un video, tranne che ora inseriamo il autoplay = 1 nell'URL per riprodurre immediatamente il video quando il iframe è impostato.div contenuto con il iframe.Siamo tutti pronti. Puoi provare la seguente demo!
In questo tutorial, abbiamo imparato come caricare un video Youtube sul clic dell'utente. Questo è più veloce e un modo più efficiente in termini di larghezza di banda rispetto al dover caricare i video direttamente a fianco del caricamento della pagina, soprattutto se sono presenti più video incorporati in una singola pagina.
E come puoi vedere dal seguente screenshot, abbiamo fatto un significativo miglioramento in termini di numero di richieste HTTP fatte durante il caricamento iniziale della pagina. In questo caso, l'abbiamo ridotto da 22 a 5 richieste HTTP.
Nel prossimo tutorial, miglioreremo il nostro codice includendolo come "Componente Web". Ciò consentirà di incorporare il video di YouTube in modo più elegante attraverso un elemento con nome personalizzato. Invece di aggiungere due div elementi come abbiamo fatto in questo tutorial, possiamo semplicemente aggiungere, per esempio,
