Share
In diesem Tutorial erkläre ich, wie Sie mehrere eingebettete YouTube-Videos faul laden können. Dadurch wird die Leistung unserer anfänglichen Seitenlast verbessert und dem Benutzer etwas Energie übertragen.
Das Einbetten eines Youtube-Videos ist für jeden, der am Web beteiligt ist, zu einem völlig normalen Prozess geworden. kopieren, einfügen, fertig. Das Abrufen einer externen Ressource wie eines Youtube-Videos kann jedoch die Ladeleistung einer Webseite beeinträchtigen, insbesondere wenn zwei oder mehr Videos auf derselben Seite eingebettet sind.
Durch das Einbetten von Videos fordern wir mehr als nur eine Videodatei. Eine Reihe von Ressourcen werden abgerufen, darunter JavaScript-Dateien, ein Stylesheet, Bilder und Ankündigungen. Und wie Sie dem folgenden Screenshot entnehmen können, entsprechen zwei Youtube-Videos 22 HTTP-Anfragen mit insgesamt 624 kb. Diese Zahlen werden steigen, wenn wir mehr Videos in die Seite einbetten.
Gesamtzahl der HTTP-Anforderungen, die beim Einbetten zweier Videos gemacht wurdenAnstatt das Youtube-Video zu laden, sobald die Seite geladen wird, ziehen wir das Video ab und spielen es ab, wenn der Benutzer dies wünscht. Diese Methode wird allgemein als bekannt faules Laden-Es minimiert die HTTP-Anforderungen beim ersten Laden der Seite und verbessert letztlich die Leistung der Seite.
Lass uns ohne weiteres anfangen.
Wir beginnen mit dem Aufbau des HTML. Das ist einfach; Wir verwenden nur zwei div Elemente. Der Erste div wird das eingebettete Youtube-Video umlaufen, das zweite div ist im ersten verschachtelt div, und wir werden es benutzen, um das zu formen abspielen Schaltfläche, um zu zeigen, dass es sich um ein abspielbares Video handelt.
Wie Sie dem obigen Code-Snippet entnehmen können, haben wir a hinzugefügt Klasse zu diesen div Elemente und a Daten- Attribut zum ersten div um die ID des Youtube-Videos anzugeben, das wir einbetten möchten.
Als Nächstes fügen wir die Stile hinzu:
.youtube Hintergrundfarbe: # 000; Rand unten: 30px; Position: relativ; Polsterauflage: 56,25%; Überlauf versteckt; Cursor: Zeiger; .youtube img width: 100%; Spitze: -16,84%; links: 0; Deckkraft: 0,7; .youtube .play-button width: 90px; Höhe: 60px; Hintergrundfarbe: # 333; Box-Schatten: 0 0 30px rgba (0,0,0,0,6); z-Index: 1; Deckkraft: 0,8; Grenzradius: 6px; .youtube .play-button: before content: ""; Bordüre: solide; Randbreite: 15px 0 15px 26,0px; Rahmenfarbe: transparent transparent transparent #fff; .youtube img, .youtube .play-button cursor: pointer; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button: vor position: absolute; .youtube .play-button, .youtube .play-button: before top: 50%; links: 50%; transform: translate3d (-50%, -50%, 0); .youtube iframe height: 100%; Breite: 100%; oben: 0; links: 0;
Diese Stile befassen sich hauptsächlich mit:
Accentsconagua
Polsterauflage vom ersten div zu 56,25%. Diese Zahl ergibt sich aus der Division von 9 durch 16 und der Multiplikation des Ergebnisses mit 100%..div zu einem Play-Button und positionieren Sie ihn in der Mitte des ersten div.An diesem Punkt sollten wir diese sehen div Elemente ähneln einem typischen Online-Videoplayer wie folgt:
Wenn Sie auf die Wiedergabeschaltfläche klicken, wird kein Video abgespielt. Es ist ein Bild. Lassen Sie uns Skripte schreiben, um die Miniaturansicht des Bildes basierend auf der in der hinzugefügten Youtube-ID abzurufen Daten einbetten Attribut. Letztendlich wird das Video auch eingebettet und abgespielt, wenn der Benutzer darauf klickt.
Zum Start wählen wir die div Elemente, die das eingebettete Video einschließen; die mit demYoutube Klasse.
var youtube = document.querySelectorAll (".youtube"); Da wir möglicherweise zwei oder mehr Youtube-Videos haben, müssen wir jedes der ausgewählten Elemente durchlaufen:
… Für (var i = 0; i < youtube.length; i++) // add the code here
Als Nächstes rufen wir das Youtube-Bildminiaturbild ab und zeigen es an. Youtube generiert mehrere Bildgrößen, die über die folgenden URLs erreichbar sind:
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)Beachten Sie, dass wir die entsprechende Youtube-Video-ID benötigen, um an die URL angehängt zu werden. Wir haben die ID in angegeben Daten, und wir können es mithilfe von JavaScript abrufen .Datensatz Eigentum.
// Schleife 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";
Wie Sie dem obigen Code entnehmen können, werden wir zeigen sdstandard.jpg Bild, da die meisten Videos heutzutage in Standard Definition (SD) vorliegen. Bei 640 × 480 Pixeln ist dieses Miniaturbild genau richtig. weder zu klein noch zu groß. Sie können sich für das hochwertige Miniaturbild entscheiden, maxresdefault.jpg, Beachten Sie jedoch, dass Youtube-Videos nicht immer in High-Definition (HD) verfügbar sind. Daher ist diese bestimmte Größe möglicherweise nicht immer verfügbar.
Wenn Sie die Miniaturansicht des Bildes asynchron laden, wird die Seite schneller geladen. Falls wir über zwei oder mehr eingebettete Youtube-Videos verfügen, wird jedes Miniaturbild dieser Videos gleichzeitig geladen, sodass der Seitenrenderfluss nicht verhindert wird:
// Schleife 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 ) );
Dieser Code lädt die Miniaturansicht des Bildes Quelle Variable. Sobald es geladen ist, hängen wir es an den Wrapper an div:
Kickoff Pause 2016 bei Envato. Noch ein Bild.Zum Schluss fügen wir den letzten Teil des Skripts hinzu.
// Schleife 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 ); );
Dieses Skript führt die folgenden Dinge aus:
klicken Ereignis an den Wrapper div sowie die anonyme Funktion ausführen.iframe Element; wir schaffen ein ähnliches iframe dass das Youtube erzeugt, um ein Video einzubetten, außer wir fügen jetzt das ein Autoplay = 1 in der URL, um das Video sofort abzuspielen, wenn die iframe eingestellt ist.div zufrieden mit dem iframe.Wir sind alle da. Sie können die folgende Demo ausprobieren!
In diesem Lernprogramm haben wir gelernt, wie Sie ein Youtube-Video mit einem Klick des Benutzers laden. Dies ist schneller und macht die Bandbreite effizienter, als Videos direkt mit dem Laden von Seiten direkt abzurufen, insbesondere wenn auf einer Seite mehrere Videos eingebettet sind.
Wie Sie dem folgenden Screenshot entnehmen können, haben wir die Anzahl der HTTP-Anforderungen, die während des ersten Seitenladens gemacht wurden, erheblich verbessert. In diesem Fall haben wir es reduziert von 22 bis 5 HTTP-Anfragen.
Im nächsten Tutorial verbessern wir unseren Code, indem wir ihn als "Webkomponente" einbinden. Dadurch können wir das Youtube-Video durch ein benutzerdefiniertes Element eleganter einbetten. Anstatt zwei hinzuzufügen div Elemente, die wir in diesem Tutorial gemacht haben, können wir beispielsweise einfach hinzufügen,
