Share
Dans le précédent didacticiel intitulé «Comment« charger paresseux »des vidéos YouTube incorporées», nous avons examiné comment charger une vidéo Youtube uniquement lorsqu'un utilisateur clique dessus. Cela accélère le chargement de notre page Web, surtout si elle contient plusieurs vidéos Youtube..
Si vous avez suivi le tutoriel à fond, vous aurez vu que nous avons dû ajouter quelques div éléments, avec le Des classes, les styles et les scripts pour le faire fonctionner.
Avoir à ajouter tout cela à chaque fois n'est pas la solution la plus pratique. Et si nous pouvions remplacer tout cela en utilisant un élément clé en main, comme
# ombre-racine? Continuez de lire pour en savoir davantageAvant de vous salir les mains, toutefois, je vous encourage vivement à vous familiariser avec l’un des didacticiels fantastiques de Kezz Bracey, Comment créer vos propres éléments HTML avec des composants Web. Cela vous donnera un aperçu des composants Web et d'éléments tels que «Shadow DOM» (également connu sous le nom de «Shadow Root»), Imports HTML et élément.
Pour commencer, nous devons créer un nouveau fichier HTML. Nous l'appellerons «youtube-embed.html». Ce fichier contiendra tout le code pour vous inscrire et construire notre nouvel élément,
Il comprendra le code JavaScript suivant, jetons donc un coup d’œil à la base:
Accentsconagua
(fonction (window, document, non défini) // (1) var thatDoc = document; var thisDoc = (thatDoc._currentScript || thatDoc.currentScript) .ownerDocument; // (2) var template = thisDoc.querySelector ('template ') .content; // (3) var YoutubeProto = Object.create (HTMLElement.prototype); // (4) YoutubeProto.createdCallback = function () // (5) var shadowRoot = this.createShadowRoot (); var clone = thatDoc.importNode (template, true); shadowRoot.appendChild (clone); // Ajoutez le code personnalisé ici…; // (6) window.youtubeEmbed = thatDoc.registerElement ('youtube-embed', prototype: YoutubeProto );) (fenêtre, document);Un certain nombre de choses, mais numérotées de façon logique, regardons donc ce que ça fait:
ceDoc, fait référence au document principal dans lequel nous déployons l'élément personnalisé. La deuxième variable, thisDoc, est le document où nous enregistrons notre nouvel élément HTML, dans ce cas, est youtube-embed.html.HTMLElement objet. Cela permettra à notre nouvel élément d'hériter des méthodes et des propriétés de tout élément HTML tel que identifiant, nom du cours, clientHeith, scrollTop, et childeNodes.createdCallback est la fonction qui sera immédiatement instanciée lors de la création du nouvel élément.Ensuite, dans le principale document, où nos vidéos seront intégrées, nous importons le youtube-embed.html.
Les composants Web sont une série de technologies Web (modèle, importation HTML, élément personnalisé et DOM fantôme) assemblées. Certains navigateurs tels qu'Opera et Chrome prennent déjà en charge ces fonctionnalités, mais Firefox, Edge et Safari ont leurs propres vues pour les prendre en charge, en ce sens qu'ils ne les prennent en charge que partiellement ou pas du tout..
Donc, si vous voulez que votre élément soit applicable dans une large gamme de navigateurs (bien sûr, vous le ferez), vous devez également charger les composants Web. polyfill.
Une fois que nous avons fait toutes ces choses et mis les fichiers à leur place, nous sommes maintenant prêts à ajouter les autres extraits de code pour donner vie à notre élément personnalisé..
Pour commencer, dans “youtube-embed.html”, nous ajoutons le élément. Puis nous imbriquons div et les styles que nous avons créés dans notre précédent tutoriel.
À ce stade, si nous déployons notre div les éléments et les styles que nous venons d'ajouter apparaissent maintenant sous l'élément personnalisé Shadow DOM.
Pour revenir à notre code JavaScript, nous devons ajouter le code suivant pour sélectionner l'élément de wrapper de vidéo dans le DOM Shadow. Notez que nous utilisons querySelector () de notre shadowRoot variable; c'est l'élément où nous annexerons l'iframe Youtube plus tard.
YoutubeProto.createdCallback = function () … var video = shadowRoot.querySelector (".youtube"); // Sélectionnez le wrapper vidéo;Dans notre précédent tutoriel, nous avons utilisé le intégration de données attribut pour passer l'ID de la vidéo Youtube. Pour rappel, l’ID permet de récupérer la vignette de l’image vidéo et de pointer vers le bon enchâssement URL de la vidéo.
Dans le cas des composants Web, un attribut nommé personnalisé est acceptable. Dans ce cas, nous pouvons, par exemple, introduire un intégrer attribut.
Puis dans le createdCallback fonction, nous devons ajouter ce qui suit pour obtenir le intégrer valeur d'attribut.
YoutubeProto.createdCallback = function () … var video = shadowRoot.querySelector (".youtube"); // Sélectionnez le wrapper vidéo. var embed = this.getAttribute ("embed"); // Récupère la valeur de l'attribut embed. ; Nous allons passer ces deux variables à notre fonction personnalisée.
Peut-être que ma tête est pleine, mais je ne peux pas penser à un nom propre pour la fonction, d'où faire.
YoutubeProto.createdCallback = function () … var embed = this.getAttribute ("embed"); var video = shadowRoot.querySelector (".youtube"); this.doTheThing (incorporer, vidéo); ; YoutubeProto.doTheThing = fonction (embedID, videoElem) var source = "https://img.youtube.com/vi/"+ embedID +" / sddefault.jpg "; var image = new Image (); image.src = source; image.addEventListener ("load", function () videoElem.appendChild (image);); videoElem.addEventListener ("click", function () var iframe = document.createElement ("iframe"); iframe.setAttribute ("frameborder", "0"); iframe.setAttribute ("allowfullscreen", "", ""; iframe .setAttribute ("src", "https://www.youtube.com/embed/"+ embedID +"? rel = 0 & showinfo = 0 & autoplay = 1 "); this.innerHTML =" "; this.appendChild (iframe); ); ;Cette fonction exécute la même ligne de codes que celle que nous avons ajoutée à notre précédent tutoriel, avec quelques ajustements toutefois. La fonction affichera la vignette de l'image vidéo Youtube et ajoutera la vidéo Youtube dans l'élément wrapper, .Youtube, sur le clic de l'utilisateur.
Et nous sommes tous ensemble! Découvrez le code source et le site de démonstration.
Dans ce didacticiel, nous avons intégré le code de notre didacticiel précédent dans un composant Web. Nous sommes maintenant en mesure d'intégrer une vidéo Youtube de manière plus élégante avec notre nouvel élément personnalisé:
Tout le code (JavaScript, CSS, HTML) est encapsulé dans un code HTML distinct, ce qui évite les erreurs potentielles au sein de ce fichier qui endommagerait l'ensemble du site. Et chaque fois que nous devons le réutiliser dans d’autres projets, nous importons le code HTML., youtube-embed.html.
Découvrez la démo sur GithubCe n'est qu'un exemple de la manière dont nous pouvons utiliser les composants Web. Vous pouvez trouver des implémentations plus étonnantes de composants Web sur customelements.io. Enfin, j'espère que vous avez apprécié ce tutoriel et que vous avez trouvé une référence facile à suivre..
