"Play-Button" einfügen der den start des Countdowns für den weiter Knopf aktiviert (wenn Autoplay nicht funktioniert)

Question

Hallo Zusammen,

Ich habe in meinem Fragebogen Videos, die mit der Autoplay-funktion abgespielt werden eingebunden. Auf der jeweiligen Fragebogenseite startet dann gleichzeitig ein countdown für den weiter Button. (hier der code)

<video width="812" height="588" controls controlsList="nodownload nofullscreen" id="stimulus" autoplay>

var countdown = 5;
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";
  cd.style.fontSize = "160%";

  // 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>

Dieser Code funktioniert einwandfrei für alle Browser außer Safari.

Safari blockiert anscheinend die Autoplay-funktion, weswegen das Video nur mit einem Klick auf die dann kurzzeitig eingeblendet "controls" startet. -> Leider ist zu diesem Zeitpunkt der countdown dann schon am laufen. Zusätzlich funktioniert es auf dem Iphone noch schlechter. Hier öffnet sich das Video bei einem klick auf Play automatisch im Vollbildmodus und verhindert so, dass man den countdown überhaupt sieht.

Wenn ich das video ganz ohne die Elemente einbinde, (also das controls vor controlsList herauslösche), kann ich den Vollbildmodus zwar verhindern und somit auch alle 'controls'. Leider lässt es sich jetzt im Safari Browser, sowohl am Handy als auch am Desktop gar nicht mehr abspielen.

<video width="812" height="588"  controlsList="nodownload nofullscreen" id="stimulus" autoplay>

Gibt es einen Code, der mich einen zusätzlich "Play-Button" einfügen lässt falls die autoplay Funktion nicht funktioniert, dessen klicken dann gleichzeitig auch den start des Countdown auf dem weiter Button initiiert?

Vielen Dank!