✔ Youtubevideo ohne Ton einbetten

[germanfrogman]

Hallo,

erstmal super Forum.

Ich habe eine mehrsprachige Webseite (mit Radio tabs) und binde dort auch Youtubevideos ein.

Ich wollte auf die gleiche Unterseite wo ich schon ein Video eingebunden habe ein weiteres einbinden, diesmal aber ohne Ton.
Dazu habe ich ein Snippet gefunden. Das funktioniert auch aber nur in der ersten Sprache.

Link:
http://www.dendrowiki.org/gir/ranitomeya-amazonica.html

Snippet:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '800',
videoId: 'f9AwHFKfyCI',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
event.target.setVolume(0);
}
</script>

Nun zu meinen Fragen
1. - was mache ich falsch? Sitze echt auf dem Schlauch
2. - wie kann ich in dem Snippet die Autoplay Funktion abschalten?

Vielen Dank

 

[Sempervivum]

2. - wie kann ich in dem Snippet die Autoplay Funktion abschalten?

Diese Frage kann ich beantworten: Das Autoplay wird hierdurch bewirkt:

event.target.playVideo();

Löschst Du dies, sollte das Video nicht von allein starten.

Die erste Frage kann ich nicht beantworten, weil ich das mit den zwei Sprachen nicht verstehe. Poste doch am besten mal die URL deiner Seite.

Wenn Du zwei Videos mit diesem Snippet abspielst, könnte es ein Problem geben, wenn Du zwei Mal die selbe Variable "player" für das Erzeugen des Players verwendest.

 

[EuroCent]

Kannst du es bitte in den Code-Tag einbinden?

Und teile uns bitte auch mit woher YT.Player.
Nur so können wir dir mitteilen, wie Du den Player Muten kannst.
Du kannst aber auch mal versuchen: player.mute() bzw. player.muted();

Quelle: https://stackoverflow.com/questions/24868226/how-do-you-mute-an-embedded-youtube-player

 

[Sempervivum]

YT.Player gehört zur Player-API von Youtube.

 

[germanfrogman]

Hallo, vielen Dank für die Antworten.

Hier ist die Seite:
http://www.dendrowiki.org/gir/ranitomeya-amazonica.html

Das Video ist schon lautlos. Aber es wird nur in der ersten Sprache angezeigt.

 

[Sempervivum]

Ohne die ganze Seite zu sehen, war das auch nicht zu verstehen. Es ist ähnlich, wie ich vermutet habe:
Du verwendest mehrfach die selbe ID "player" für den Player-Container. I. allg. wird dann das erste gefundene Element auf der Seite angesprochen, hier das in der Englisch-Sektion und mit dem Container für Spanisch und Deutsch passiert gar nichts. Außerdem solltest Du das Youtube-Skript nicht mehrfach einbinden.
Lösung also: Den Containern unterschiedliche IDs geben:

<div id="playeren"></div>
<div id="playeres"></div>
<div id="playerde"></div>

Natürlich bleiben sie dort, wo sie hingehören.
Und dann das Javascript zusammenfassen und die Player einzeln initialisieren:

<script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        playeren = new YT.Player('playeren', {
          height: '480',
          width: '800',
          videoId: 'f9AwHFKfyCI',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        playeres = new YT.Player('playeres', {
          height: '480',
          width: '800',
          videoId: 'f9AwHFKfyCI',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        playerde = new YT.Player('playerde', {
          height: '480',
          width: '800',
          videoId: 'f9AwHFKfyCI',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
           event.target.setVolume(0);
       event.target.playVideo();
      }
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
                  done = true;
        }
           event.target.setVolume(0);
      }
</script>

Ich hoffe, ich habe keinen Fehler gemacht. Habe zunächst keine Testseite aufgebaut.
Edit: Ich habe beim copy-paste die Video-IDs nicht angepasst. Das musst Du selber nachholen.

BTW: Tolle Fotos und tolle Videos. Hast Du die selber gemacht?

 

[germanfrogman]

Hallo, vielen Dank.
Die ersten 3 Fotos sind von mir.

Ich habe jetzt das Script in den Header geschrieben, und in den Bereichen der Sprache nur den Div Container gelegt.
neue Testseite: http://www.dendrowiki.org/gir/ranitomeya-amazonicaa.html
nun ist der Container aber leer.

Habe ich das mit dem nur 1x Script verwenden falsch verstanden?

 

[Sempervivum]

Ich habe jetzt das Script in den Header geschrieben, und in den Bereichen der Sprache nur den Div Container gelegt.

Oh, das hätte ich erwähnen müssen: Wenn Du das Skript in den Header legst, exitieren die divs noch nicht, auf die es zugreift. Du musst das Skript an das Ende des Body legen, vor dem schließenden </body>. Und ja, das Skript wird nur einmal eingefügt.

 

[germanfrogman]

irgendwas ist immer noch falsch - schau bitte nochmal
http://www.dendrowiki.org/gir/ranitomeya-amazonicaa.html

 

[Sempervivum]

Da sind so merkwürdige Schmierzeichen drin:

Lösche die Einzüge mal und mach sie neu mit Leerzeichen.