Video mit Countdown Button kombinieren

Question

Hallo zusammen,

ich habe ein Video in meinen Fragebogen integriert. Das Video soll erst starten, wenn man den Play-Knopf drückt. Die Bedienelemente sind während der Laufzeit ausgeblendet. Dies funktioniert soweit auch. Zusätzlich soll ein Countdown starten, der über die Dauer des Videos herunterzählt. Sobald der Countdown und somit auch das Video durchgelaufen sind, soll der Next Button erscheinen.
Ich habe hierzu Folgenden Code verwendet:

<video width="854" height="480" controls controlsList="nodownload" id="stimulus" >
  <source src="pro://Condition_1.mp4" type="video/mp4" />
  <source src="pro://Condition_1.webm" type="video/webm" />
</video>

<script type="text/javascript">
var video = document.getElementById("stimulus");
//Countdown anpassen je nach Scenario!!!
var countdown = 98;
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 + " sec");
  countdownDisplay.appendChild(content );
}
SoSciTools.attachEvent(video, "play", countdownStart); 
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden

SoSciTools.attachEvent(window, "load", function(evt) {
  var button = document.getElementById(buttonID);
  button.style.display = "none";
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  stimulus.setAttribute("controls","controls");
});


 
</script>

Das funktioniert soweit auch, aber wenn ich das Fenster vergrößere/verkleinere, beginnt das der Countdown erneut. Zusätzlich steht dieser leider nicht an der Stelle wo der Next-Button erscheint, sondern weiter rechts. Wenn ich die Seite verlasse, dann hängt der Countdown komplett - es wäre super, wenn mir jemand helfen könnte!

Vielen Dank für Eure Hilfe!

Comments

> Das funktioniert soweit auch, aber wenn ich das Fenster vergrößere/verkleinere, beginnt das der Countdown erneut.

Das ist ja lustig :)

Posten Sie doch bitte mal einen Pretest-Link direkt (!) zur betroffenen Seite, dann kann ich einen Blick darauf werfen. Aus dem JavaScript-Code geht m.E. nicht hervor, warum der Countdown beim Skalieren der Seite ("resize") neustarten sollten.

---

https://www.soscisurvey.de/MasterThesisAW1/?act=hgjcaskLZKZ34xMtn1J21leX

---

Danke für Ihre Hilfe! Kann man den Countdown zusätzlich auch direkt an die Videolänge koppeln? Momentan habe ich die Dauer nämlich individuell eingestellt

---

In welchem Browser hatten Sie das Problem denn beobachtet? In Firefox kann ich das Video abspielen und der Timer läuft unabhängig von Größenänderungen am Fenster und Wechsel in andere Tabs immer korrekt weiter.

---

Ich habe das Problem im Safari Browser beobachtet

---

Einen Safari habe ich mangels Mac-Rechner gerade nicht zur Hand. Ich kann dies aber gerne kommende Woche prüfen, wenn Sie das Problem nicht derweilen einfach mit dem Code aus meiner Antwort unten gelöst haben.

---

ja bei mir auch, allerdings erscheint dann ein neuer Timer neben dem alten - und nicht der alte stoppt sondern ein neuer Timer beginnt ab der Sekunde zu zählen wo man in das Tab zurückkehrt - kann man dieses Problem beheben?

---

Also im Grunde ist es super, dass der Timer nicht weiterläuft und das Video stoppt - allerdings verstehe ich nicht wieso nicht der ursprüngliche Timer weiterläuft sondern ein zweiter Timer erscheint

---

Das klingt danach, dass die Funktion countdownStart() zweimal aufgerufen wird. Fügen sie am Anfang der Funktion einfach folgendes ein:

if (countdownDisplay) {
  return;
}

Wenn schon ein Timer angezeigt wird, dann erzeugt die Funktion keinen weiteren. Es kann schon sein, dass einige Browser die Wiedergabe stoppen, wenn man das Tab wechselt - und vermutlich kann man das pro Browser auch noch individuell konfigurieren. Die Fortsetzung erzeugt dann nochmal ein "play" Event.

Answer 1

Kann man den Countdown zusätzlich auch direkt an die Videolänge koppeln?

Ja, Sie können die Länge des Videos über die Eigenschaft duration abfragen und die aktuelle Abspielposition über currentTime. In Ihrem Fall also konkret:

var video = document.getElementById("stimulus");

...

function countDown() {
    var duration = video.duration;
    var position = video.currentTime;

    if (duration - position < 1) {
        window.clearTimeout(countdownTimer);
        // Display nextbutton
        var button = document.getElementById(buttonID);
        button.style.display = "";
        // Remove countdown
        button.parentNode.removeChild(countdownDisplay);
    } else {
        countdownRefresh(duration - position);
    }
  }
}

function countdownRefresh(countdown) {
  // Clear
  while (countdownDisplay.lastChild) {
    countdownDisplay.removeChild(countdownDisplay.lastChild);
  }
  // Display
  var content = document.createTextNode(Math.round(countdown) + " sec");
  countdownDisplay.appendChild(content );
}

Comments

Löst die auch das Problem der Position des Countdowns?

---

Das Problem mit der Position kommt m.E. daher, dass der Code ausgeführt wird wenn der Weiter-Knopf noch keine Größe hat. Ändern Sie bitte einmal die Zeile

cd.style.width = button.offsetWidth + "px";

wie folgt:

cd.style.width = "40px";

---

Könnten Sie mir erklären, wie dann der vollständige Code aussehen sollte - inkl. Hiden des Next Buttons?

---

Tauschen Sie bitte einfach in Ihrem ursprünglichen Code die beiden Funktionen und die eine Zeile aus.

---

ich habe den geänderten Code als Antwort eingefügt - stimmt dieser dann? oder habe ich hierbei einen Fehler gemacht

am Anfang zeigt es kurz NaN an bevor die Dauer des Videos ermittelt wurde gibt es hier eine Möglichkeit dies auszublenden

---

Sie können über die Funktion isNaN() prüfen, ob schon eine Zeit berechnet werden konnte (klappt nicht, solange die Gesamtlänge noch nicht bekannt ist) und ggf. einfach noch nichts anzeigen. Aber diese drei Zeilen mit einem einfachen IF-Filter zu schreiben, das überlasse ich Ihnen :)

Tipp: Es geht um die folgende Zeile

var content = document.createTextNode(Math.round(countdown) + " sec");

---

var content = document.createTextNode(Math.round(countdown) + " sec");
   if (isNaN(countdown)) {
        "";
    } else {
      countdownDisplay.appendChild(content );
    }

---

vielen dank für den Tipp!!

Answer 2

    <video width="854" height="480" controls controlsList="nodownload" id="stimulus" >
  <source src="pro://Condition_1.mp4" type="video/mp4" />
  <source src="pro://Condition_1.webm" type="video/webm" />
</video>

<script type="text/javascript">
var video = document.getElementById("stimulus");
//Countdown anpassen je nach Scenario!!!
var countdown;
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 = "40px";
  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() {
    var duration = video.duration;
    var position = video.currentTime;

    if (duration - position < 1) {
        window.clearTimeout(countdownTimer);
        // Display nextbutton
        var button = document.getElementById(buttonID);
        button.style.display = "";
        // Remove countdown
        button.parentNode.removeChild(countdownDisplay);
    } else {
        countdownRefresh(duration - position);
    }
  }
function countdownRefresh(countdown) {
  // Clear
  while (countdownDisplay.lastChild) {
    countdownDisplay.removeChild(countdownDisplay.lastChild);
  }
  // Display
  var content = document.createTextNode(Math.round(countdown) + " sec");
  countdownDisplay.appendChild(content );
}

SoSciTools.attachEvent(video, "play", countdownStart); 
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden

SoSciTools.attachEvent(window, "load", function(evt) {
  var button = document.getElementById(buttonID);
  button.style.display = "none";
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  stimulus.setAttribute("controls","controls");
});


 
</script>