0 votes
in SoSci Survey (dt.) by s201835 (130 points)
edited by s201835

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!

by SoSci Survey (302k points)
> 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.
by s201835 (130 points)
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
by SoSci Survey (302k points)
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.
by s201835 (130 points)
Ich habe das Problem im Safari Browser beobachtet
by SoSci Survey (302k points)
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.
by s201835 (130 points)
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?
by s201835 (130 points)
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
by SoSci Survey (302k points)
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.

2 Answers

0 votes
by SoSci Survey (302k points)

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 );
}
by s201835 (130 points)
Löst die auch das Problem der Position des Countdowns?
by SoSci Survey (302k points)
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";
by s201835 (130 points)
Könnten Sie mir erklären, wie dann der vollständige Code aussehen sollte - inkl. Hiden des Next Buttons?
by SoSci Survey (302k points)
Tauschen Sie bitte einfach in Ihrem ursprünglichen Code die beiden Funktionen und die eine Zeile aus.
by s201835 (130 points)
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
by SoSci Survey (302k points)
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");
by s201835 (130 points)
var content = document.createTextNode(Math.round(countdown) + " sec");
   if (isNaN(countdown)) {
        "";
    } else {
      countdownDisplay.appendChild(content );
    }
by s201835 (130 points)
vielen dank für den Tipp!!
0 votes
by s201835 (130 points)
    <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>

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...