Youtubevideo ohne Ton einbetten

germanfrogman

Grünschnabel
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
 
2. - wie kann ich in dem Snippet die Autoplay Funktion abschalten?
Diese Frage kann ich beantworten: Das Autoplay wird hierdurch bewirkt:
Code:
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.
 
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:
HTML:
<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:
Code:
<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?
 
Zuletzt bearbeitet:
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.
 
Zurück