Share
Dans ce didacticiel, nous expliquerons comment «charger paresseux» plusieurs vidéos YouTube intégrées. Cela améliorera les performances de notre chargement initial de pages et donnera un certain pouvoir à l'utilisateur..
L'incorporation d'une vidéo Youtube est devenue un processus tout à fait normal pour quiconque est impliqué dans le Web. copier, coller, fait. Toutefois, l'intégration d'une ressource externe telle qu'une vidéo Youtube peut ralentir les performances de chargement d'une page Web, en particulier si deux vidéos ou plus sont incorporées sur la même page..
En incorporant des vidéos, nous demandons plus qu'un simple fichier vidéo. Un certain nombre de ressources sont extraites, notamment des fichiers JavaScript, une feuille de style, des images et des publicités. Et comme vous pouvez le voir dans la capture d'écran ci-dessous, deux vidéos Youtube équivalent à 22 demandes HTTP avec un total de 624 Ko téléchargées. Ces chiffres vont grimper à mesure que nous intégrons plus de vidéos sur la page..
Nombre total de requêtes HTTP effectuées lors de l'incorporation de deux vidéosAinsi, au lieu de charger la vidéo Youtube dès le chargement de la page, nous allons tirer et lire la vidéo lorsque l'utilisateur le demande. Cette méthode est communément appelée chargement paresseux-cela minimisera les requêtes HTTP lors du chargement initial de la page et améliorera finalement les performances de la page.
Sans plus tarder, commençons.
Nous commençons par la construction du HTML. Ceci est simple; nous utilisons seulement deux div éléments. La première div va enrouler autour de la vidéo Youtube intégrée, la deuxième div est imbriqué dans le premier div, et nous l'utilisons pour façonner la Jouer bouton pour illustrer qu'il s'agit d'une vidéo lisible.
Comme vous pouvez le voir dans l'extrait de code ci-dessus, nous avons ajouté un classe à ceux-là div éléments et un Les données- attribuer à la première div pour spécifier l'ID de la vidéo Youtube que nous intégrerons.
Ensuite, nous ajoutons les styles:
.youtube background-color: # 000; marge inférieure: 30 px; position: relative; rembourrage en haut: 56,25%; débordement caché; curseur: pointeur; .youtube img width: 100%; en haut: -16,84%; gauche: 0; opacité: 0,7; .youtube .play-button width: 90px; hauteur: 60px; couleur de fond: # 333; boîte-ombre: 0 0 30px rgba (0,0,0,0,6); z-index: 1; opacité: 0,8; border-radius: 6px; .youtube .play-button: before content: ""; style de bordure: solide; largeur de la bordure: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; .youtube img, .youtube .play-button curseur: pointeur; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button: before position: absolute; .youtube .play-button, .youtube .play-button: avant top: 50%; à gauche: 50%; transformer: translate3d (-50%, -50%, 0); .youtube iframe height: 100%; largeur: 100%; en haut: 0; gauche: 0;
Ces styles traitent principalement de:
Accentsconagua
rembourrage du premier div à 56,25%. Ce nombre est obtenu en divisant 9 par 16 et en multipliant le résultat par 100.div sur un bouton de lecture et le positionner au centre de la première div.À ce stade, nous devrions voir ces div les éléments commencent à ressembler à un lecteur vidéo en ligne typique, comme suit:
En cliquant sur le bouton de lecture ne jouera pas une vidéo. C'est une image. Écrivons des scripts pour récupérer la vignette de l'image en fonction de l'ID Youtube ajouté dans le intégration de données attribut. En fin de compte, il intégrera et lira la vidéo lorsque l'utilisateur cliquera dessus..
Pour le démarrer, nous sélectionnons le div éléments qui vont envelopper la vidéo intégrée; ceux avec leYoutube classe.
var youtube = document.querySelectorAll (".youtube"); Étant donné que nous pouvons avoir deux vidéos Youtube ou plus, nous devrons alors parcourir chacun des éléments sélectionnés:
… Pour (var i = 0; i < youtube.length; i++) // add the code here
Ensuite, nous allons récupérer la vignette de l'image Youtube et l'afficher. Youtube génère plusieurs tailles d’images, chacune étant accessible via les URL suivantes:
http://img.youtube.com/vi/video-idBuch/mqdefault.jpg (320 × 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 × 1080 pixels)Notez que nous avons besoin de l’ID vidéo Youtube correspondant à ajouter à l’URL. Nous avons spécifié l'ID dans Les données, et nous sommes en mesure de le récupérer en utilisant le JavaScript .ensemble de données propriété.
// boucle pour (var i = 0; i < youtube.length; i++) // thumbnail image source. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
Comme vous pouvez le voir dans le code ci-dessus, nous allons montrer sdstandard.jpg image, puisque la plupart des vidéos sont aujourd’hui en définition standard (SD). Avec ses 640 × 480 pixels, cette miniature d’image est à la bonne taille; ni trop petit ni trop grand. Vous pouvez opter pour la vignette de haute qualité, maxresdefault.jpg, mais gardez à l'esprit que les vidéos Youtube ne sont pas toujours disponibles en haute définition (HD), de sorte que cette taille particulière peut ne pas toujours être disponible.
Le chargement de la vignette de l'image de manière asynchrone permettra à la page de se charger plus rapidement. Au cas où nous aurions deux ou plusieurs vidéos Youtube intégrées, chaque vignette d'image de ces vidéos sera chargée simultanément afin qu'elles n'empêchent pas le déroulement du rendu de la page:
// boucle pour (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 ) );
Ce code chargera la vignette de l'image à partir du la source variable. Une fois qu'il est chargé, nous l'ajoutons à l'emballage div:
Pause Fest 2016 Coup d'envoi à Envato. Encore une image.Enfin, nous ajoutons le dernier morceau du script.
// boucle pour (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 ); );
Ce script fait spécifiquement les choses suivantes:
Cliquez sur événement à l'emballage div ainsi que d'exécuter la fonction anonyme attachée.iframe élément; nous créons un semblable iframe que Youtube génère pour intégrer une vidéo, sauf que nous insérons maintenant le lecture automatique = 1 dans l'URL pour lire immédiatement la vidéo lorsque le iframe est réglé.div contenu avec le iframe.Nous sommes tous ensemble. Vous pouvez essayer la démo suivante!
Dans ce tutoriel, nous avons appris à charger une vidéo Youtube lorsque l'utilisateur clique dessus. C'est plus rapide et plus efficace en termes de bande passante que d'avoir à tirer des vidéos directement lors du chargement de la page, surtout si vous avez plusieurs vidéos intégrées sur une seule page..
Et comme vous pouvez le voir sur la capture d'écran suivante, nous avons considérablement amélioré le nombre de requêtes HTTP effectuées lors du chargement initial de la page. Dans ce cas, nous l'avons réduit de 22 à 5 requêtes HTTP.
Dans le prochain didacticiel, nous allons améliorer notre code en l’enveloppant en tant que «composant Web». Cela nous permettra d'intégrer la vidéo Youtube de manière plus élégante grâce à un élément nommé personnalisé. Au lieu d'ajouter deux div éléments comme nous l'avons fait dans ce tutoriel, nous pouvons simplement ajouter, par exemple,
