In diesem Tutorial zeige ich Ihnen, wie Sie ein YouTube-Video in Ihre Website einfügen, das beim Laden einer Seite automatisch startet und keinen Ton hat . Hierzu verwenden wir die von Youtbe bereitgestellte API. Wir müssen Code in JavaScript schreiben, sehr wenig wirklich, lass uns anfangen.
Als Erstes müssen wir die Kennung des Videos angeben, das wir hochladen möchten. Dazu betreten wir YouTube und suchen das gewünschte Video, dessen ID von v = in der URL stammt, im folgenden Bild zeige ich Ihnen ein Beispiel:
Jetzt können wir das Skript zu unserer Seite hinzufügen, dann erkläre ich einige Details, die berücksichtigt werden müssen.
Wir benötigen ein Leerzeichen in unserem HTML-Code, um den Player hinzuzufügen. Dazu verwenden wir ein div. Die Anweisung im Code lautet wie folgt (die ID ist für die Funktion erforderlich, die wir über die API verwenden):
<div id = "playerAudio"> </ div>
Die ID können Sie der gewünschten zuweisen. Wenn Sie sie ändern, beachten Sie, dass der Code von Schritt 4 auch beim Erstellen des Players angezeigt wird. Sie müssen ihn auch ändern, da der Verweis auf diese ID durch die ID verdeutlicht wird.
Wir verlinken die Youtube API mit unserer Seite, dazu schreiben wir folgende Anleitung:
<script async src = "https://www.youtube.com/iframe_api"> </ script>
Stellen Sie fest, dass es sich um eine asynchrone Last handelt.
Wir fügen einige Skript-Tags hinzu (am Ende des Körpers selbst), in denen wir die Funktion onYouTubeIframeAPIReady () erstellen. Den Namen der Funktion muss man so belassen. In dieser Funktion konfigurieren wir die Breite, die Höhe des Players, die ID des Videos und einige andere Funktionen.
<script> Funktion onYouTubeIframeAPIReady () { männlich reproduktiv player = new YT.Player ('playerAudio', { videoId: '4CGxmrq3YB0', Breite: 730, Höhe: 370, playerVars: { Autoplay: 1, Kontrollen: 1, showinfo: 0, Modestbranding: 0, Schleife: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0 }, Ereignisse: { onReady: Funktion (e) { e.target.mute (); } } }); } </ script>
[/color] [color = # a9a9a9] Code mit der Youtube-API [/ color]
- Die ID des Videos muss in videoId eingegeben werden .
- Für den automatischen Start wird die automatische Wiedergabe verwendet. 1 wird nur gestartet, wenn Sie 0 nicht eingeben .
- Zum Stummschalten wird die folgende Funktion in der Ereigniszone verwendet:
onReady: Funktion (e) { e.target.mute (); }
Sie können auch festlegen, wie oft das Video wiederholt wird (Schleife), wenn die Steuerelemente (Steuerelemente) angezeigt werden (z. B. Wiedergabe, Lautstärke usw.).
Dann lasse ich den kompletten Code:
<html> <head> </ head> <body> <div id = "playerAudio"> </ div> <script async src = "https://www.youtube.com/iframe_api"> </ script> <script> Funktion onYouTubeIframeAPIReady () { männlich reproduktiv player = new YT.Player ('playerAudio', { videoId: '4CGxmrq3YB0', Breite: 730, Höhe: 370, playerVars: { Autoplay: 1, Kontrollen: 1, showinfo: 0, Modestbranding: 0, Schleife: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0 }, Ereignisse: { onReady: Funktion (e) { e.target.mute (); } } }); } </ script> </ body> </ html>
Wenn Sie die Datei mit dem obigen Code öffnen, erhalten Sie den Player, wie in der folgenden Abbildung dargestellt: 
Falls Sie den Code wollen, hinterlasse ich hier eine Zip:
144 Descargas videoYoutube.zip 533 Bytes 144 Downloads