Schnelleres YouTube ist in JavaScript eingebettet

Beschleunigen Sie Ihre YouTube -Einbettungen mit JavaScript: Eine umfassende Anleitung

Schlüsselhighlights:

• Reduzieren Sie die anfänglichen Seitenladezeiten dramatisch, indem Sie JavaScript verwenden, um Standard -YouTube -Einbettungen durch leichte Voransichten zu ersetzen.
• Verbesserung der Benutzererfahrung und der Seitenästhetik mit benutzerdefinierten YouTube -Video -Einbetten mithilfe von HTML5 -Datenattributen zur Steuerung des Autoplays, Brandings und Steuerelements.
• optimieren Sie die visuelle Anziehungskraft, ohne die Lastgeschwindigkeit durch Nutzung verschiedener YouTube -Miniatur -Qualitätsoptionen für verschiedene Bildschirmauflösungen zu beeinträchtigen.
• Implementieren Sie diese Lösung effizient mit reinem JavaScript (für einen schlanken, abhängigen Ansatz) oder JQuery (für einfachere Codierung und breitere Browserkompatibilität).

Website -Geschwindigkeit ist von größter Bedeutung. Leichte Inhalte mit minimalen Anforderungen sind für eine positive Benutzererfahrung von entscheidender Bedeutung. Videos sind jedoch für die Einbeziehung von Inhalten unerlässlich, die häufig von Anbietern von Drittanbietern wie YouTube stammen. Die Herausforderung? Videos erhöhen die Seitenladezeiten erheblich. Ein einzelnes eingebettetes Video kann mehrere HTTP -Anfragen generieren und eine beträchtliche Bandbreite konsumieren, auch wenn der Betrachter nicht aktiv ansieht.

Dieser Artikel enthält eine Lösung, um dieses Problem zu mildern, inspiriert vom Ansatz von Amit Agarwal 2013, aber mit modernen Techniken verbessert. Wir werden die anfängliche Lastgröße Ihrer YouTube -Videos drastisch reduzieren.

Die Lösung:

Die Kernidee besteht darin, zunächst eine Miniaturansicht anstelle des vollständigen Videoplayers anzuzeigen. JavaScript ersetzt die Miniaturansicht dynamisch durch den tatsächlichen Player, wenn der Benutzer zum Spielen klickt. Dies reduziert die anfängliche Lastgröße von Seiten erheblich. Das Miniaturansicht, das ein kleineres Bild ist, lädt schnell.

Verbesserungen:

Diese verbesserte Version nutzt sowohl Vanille -JavaScript- als auch jQuery -Implementierungen. Außerdem werden eine neue Funktion eingeführt: die Möglichkeit, YouTube -Videoparameter über HTML5 -Datenattribute anzupassen. Dies bietet eine feinkörnige Kontrolle über die Spielereinstellungen, einschließlich:

• controls: (0 oder 1) Player -Steuerelemente ausblenden oder anzeigen.
• modestbranding: (0 oder 1) Entfernen Sie das YouTube -Logo.
• rel: (0 oder 1) Deaktivieren Sie verwandte Videovorschläge nach der Wiedergabe.
• showinfo: (0 oder 1) Video -Titel- und Uploader -Informationen ausblenden.
• start: (Sekunden) Starten Sie die Wiedergabe zu einem bestimmten Zeitpunkt.
• vq: (z. B. HD720) Setzen Sie die Videoqualität (falls verfügbar).

Wenn das Video abgespielt wird, werden Parameter wie autoplay (um die Wiedergabe sofort zu starten) und autohide (um Steuerelemente zu verbergen, wenn es inaktiv ist) automatisch hinzugefügt.

YouTube Thumbnail Optionen:

YouTube bietet mehrere Miniaturgrößen, die über URLs wie: https://img.youtube.com/vi/<video-id>/<thumbnail-size>.jpg</thumbnail-size></video-id> (oder verwenden i.ytimg.com als kürzere Alternative) zugänglich. Zu den Optionen gehören:

• default.jpg (120x90)
• hqdefault.jpg (480x360)
• mqdefault.jpg (320x180)
• sddefault.jpg (640x480)
• maxresdefault.jpg (1280x720)

Implementierung:

html:

Das HTML legt die YouTube -Video -ID, die Abmessungen und (optional) benutzerdefinierte Parameter fest:

<div class="youtube" id="fsrJWUVoXeM" style="width: 500px; height: 281px;"></div>
<div class="youtube" id="lR4tJr7sMPM" data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720" style="width: 640px; height: 360px;"></div>

css:

Das CSS stilft die Miniaturansicht, zentriert sie und fügt ein Spielsymbol hinzu (unter Verwendung eines Daten -URI zur Effizienz):

.youtube { /* ... CSS styles ... */ }
.youtube .play { /* ... CSS styles ... */ }

(JavaScript und JQuery -Implementierungen sind für die Kürze weggelassen, sind jedoch im ursprünglichen Artikel verfügbar.)

Ergebnisse und Schlussfolgerung:

Die Implementierung dieser Lösung verbessert die Seitenladezeiten erheblich. Tests in der realen Welt zeigen erhebliche Reduzierungen der HTTP-Anforderungen und der Seitengröße, was zu schnelleren Ladezeiten führt. Der Code ist für Experimente und Verbesserung auf CodePen verfügbar. Diese einfache Codeänderung bietet einen erheblichen Leistungsschub und macht sie zu einer wertvollen Ergänzung zu jeder Website, die eingebettete YouTube -Videos verwendet.

Das obige ist der detaillierte Inhalt vonSchnelleres YouTube ist in JavaScript eingebettet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!