Countdown für "Weiter"-Button mit Klick auf Play verknüpfen

Question

Hallo liebes Team,

ist es möglich den Countdown für den "Weiter"-Button erst starten zu lassen, wenn der Teilnehmer bei meinem eingebetteten Video auf Play drückt?

Kann man das irgendwie verknüpfen?

Liebe Grüße
Anna

Comments

Ja, aber damit ich konkreter werden kann, müssten Sie Ihre Frage bitte editieren und den Code ergänzen, den Sie bisher für den Countdown verwenden. Außerdem den HTML-Code vom Video.

Answer 1

Momentan verwende ich für den Countdown diesen Code:

<script type="text/ja

vascript">
<!--
 
var countdown = 49;
var countdownDisplay;
var countdownTimer;
// "submit0" ist der Weiter-Knopf,
// mit "buttonsAuto" kann man auch den Zurück-Knopf ausblenden
var buttonID = "submit0";  
 
function countdownStart() {
  // Next button
  var button = document.getElementById(buttonID);
  // Create countdown element
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  // Init countdown
  button.parentNode.appendChild(countdownDisplay);
  countdownRefresh();
  // Hide next button
  button.style.display = "none";
  // Start countdown
  countdownTimer = window.setInterval(countDown, 1000);
}
 
function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    // Display nextbutton
    var button = document.getElementById(buttonID);
    button.style.display = "";
    // Remove countdown
    button.parentNode.removeChild(countdownDisplay);
  }
}
 
function countdownRefresh() {
  // Clear
  while (countdownDisplay.lastChild) {
    countdownDisplay.removeChild(countdownDisplay.lastChild);
  }
  // Display
  var content = document.createTextNode(countdown + " Sek.");
  countdownDisplay.appendChild(content );
}
 
SoSciTools.attachEvent(window, "load", countdownStart);
 
// -->
</script>

Und hier der HTML Code des Videos:

<div style="text-align: center"><iframe width="560" height="315" src="https://www.youtube.com/embed/mfn9CGfksjY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

Answer 2

Sie binden das Video direkt per iFrame von YouTube ein. Das hat leider zur Folge, dass Sie nicht (!) auf das Starten des Videos reagieren können. Denn die meisten Browser blockieren eine JavaScript-Kommunikation zwischen Fenstern bzw. Frames, die von unterschiedlichen Domains stammen (Cross-Site-Scripting).

Comments

ok. Und wenn ich die Videos direkt einbinde?

---

Dann haben Sie mittels JavaScript volle Kontrolle über das Video.