timer zum auslösen der click funktion

Question

Hallo zusammen,

Ich habe mit dem folgenden code ein Video eingebunden, und es bei den Testpersonen bei denen Autoplay blockiert wird, mit der click funktion starten lassen. Ich hätte gerne, dass bei erneutem Click in das Video, die Testpersonen gleich auf die nächste Fragebogenseite gelangen (was mit diesem Code auch funktioniert).

    <video width="712" height="488"  controlsList="nodownload nofullscreen" id="stimulus" autoplay playsinline>
  <source src="Air_Wick.ogg" type="video/ogg" />
  <source src="Air_Wick.mp4" type="video/mp4" />
  <source src="Air_Wick.webm" type="video/webm" />
</video>

    <script type="text/javascript">
document.getElementById("stimulus").addEventListener("click", function() {
  document.getElementById("stimulus").play();
});
</script>

<script type="text/javascript">
document.getElementById("stimulus").addEventListener("click", function() {
  document.getElementById("stimulus").play();
});
</script>

Allerdings würde ich gerne die Click funktion auf das video zum weiterleiten auf die nächste Seite erst 5 Sekunden nachdem das Video spielt aktivieren. Ich habe es mit folgendem Code versucht, der leider nicht funktioniert:

<script type="text/javascript">
<!--

function click2()  {
 var video = document.getElementById("stimulus");
document.getElementById("stimulus").addEventListener("click", function() {
 SoSciTools.attachEvent(video, "click", SoSciTools.submitPage);
})

SoSciTools.attachEvent(video, "play",
  function() {
    var video = document.getElementById("stimulus");
     click2.style.display = "false";
    window.setTimeout(click2, 5000); // 
      });
</script>

Ich wäre super dankbar, wenn mir jemand den richtigen Code sagen könnte.

Vielen Dank im voraus und liebe Grüße
Sara

Answer 1

Allerdings würde ich gerne die Click funktion auf das video zum weiterleiten auf die nächste Seite erst 5 Sekunden nachdem das Video spielt aktivieren.

Ihr Code startet beim Klick einen Timer und leitet dann nach 5 Sekunden auf die andere Seite weiter.

Wenn ich Sie korrekt verstehe, dann möchten Sie nach dem Klick eigentlich einen Filter, welcher den Klick ignoriert, wenn das Video noch nicht bei der 5-Sekunden-Position ist. So ähnlich wie die Werbeanzeigen bei YouTube ;)

Diesen Filter können Sie ganz einfach mit der Eigenschaft currentTime realisieren:

document.getElementById("stimulus").addEventListener("click", function() {
    if (document.getElementById("stimulus").currentTime >= 5) {
        SoSciTools.submitPage();
    }
}

Comments

Genau wie die Werbeanzeigen auf YouTube :). Ich möchte, dass es erst 5 Sekunden nach Start des Videos möglich ist zu klicken und somit auf die nächste Fragebogenseite zu gelangen.

Leider habe ich nicht so genau verstanden an welcher Stelle meines Codes ich den o.g.nannte Code einsetzen muss, dass es funktioniert. So wie ich ihn eingesetzt habe funktioniert es leider nicht:

<script type="text/javascript">
<!--

function click2()  {
 var video = document.getElementById("stimulus");
document.getElementById("stimulus").addEventListener("click", function() {
 SoSciTools.attachEvent(video, "click", SoSciTools.submitPage);
})

SoSciTools.attachEvent(video, "play",
  function() {
   document.getElementById("stimulus").addEventListener("click", function() {
    if (document.getElementById("stimulus").currentTime >= 5) {
        SoSciTools.submitPage();
    }
}
</script>


Ganz lieben Dank!!

---

Im Prinzip können Sie den Code auf der obersten Ebene platzieren - denn solange das Video nicht läuft, ist der Klick ja auch wirkungslos.

Die Funktion click2() ist m.E. obsolet.

Prinzipiell sollte es aber so funktionieren, wie Sie oben schreiben. Ergänzen Sie noch ein wenig Debugging-Information und sehen Sie mal nach, was die JavaScript-Fehlerkonsole des Browser so sagt.

video.addEventListener("play", function() {
    console.log("play");
    document.getElementById("stimulus").addEventListener("click", function() {
        console.log("click");
        console.log(document.getElementById("stimulus").currentTime);
        if (document.getElementById("stimulus").currentTime >= 5) {
            SoSciTools.submitPage();
        }
    }
}

---

Leider funktioniert dieser Code auch nicht. Man kann das Video zwar noch mit einem click in das Video starten, aber wird auch nach 5 Sekunden und dem click nicht weitergeleitet.

Die JavaScript-Fehlerkonsole sagt "SyntaxError: missing ) after argument list"
Ich habe allerdings nochmal alle ) gecheckt und soweit ich sehen kann keine vergessen.

Vielen vielen Dank für Ihre Hilfe (und Geduld!)

---

Habe das Problem gefunden :)

video.addEventListener("play", function() {
    console.log("play");
    document.getElementById("stimulus").addEventListener("click", function() {
        console.log("click");
        console.log(document.getElementById("stimulus").currentTime);
        if (document.getElementById("stimulus").currentTime >= 5) {
            SoSciTools.submitPage();
        }
    }
)}
);