Video in Fragebogen: Autoplay nach drücken der Enter Taste und Ausblenden der Bedienelemente

Question

Hallo, ich möchte gerne in meiner Onlinestudie zwei Videos einbinden. Diese habe ich bereits hochgeladen und mittels html in meinen Fragebogen gepackt.
Nun möchte ich gerne, dass die Teilnehmer das Video starten können nachdem sie einen kurzen Text gelesen haben, in dem sie die Enter Taste drücken. Darüber hinaus möchte ich gerne, dass das Video nicht angehalten werden kann, und nach dem Ende auf die nächste Seite weitergesprungen wird. Außerdem wäre es toll wenn das Video, das nach dem Lesen des kurzen Textes anfängt, in Vollbild gezeigt werden würde.

Dies ist bisher mein Html code, leider kenne ich mich dort gar nicht aus, deswegen wäre es toll wenn ihr mir helfen könntet!

<video width="512" height="288" controls controlsList="nodownload">
<source src="pro://1.Film.mp4" type="video/mp4" />
</video>

Liebe Grüße,
Moritz

Answer 1

Sie benötigen hierfür weniger HTML als vielmehr JavaScript. Mit einer Taste zu starten ist womöglich nicht ideal, denn Sie wissen nicht, wo der Fokus liegt (welches Bedienelement also gerade ausgewählt ist), wenn der Teilnehmer den Text gelesen hat. Normalerweise wird dieser schon irgendwo im Browserfenster sein, aber sicher sein können sie eben nicht. Das ist eine potenzielle Fehlerquelle. Und wenn Sie den Teilnehmern erst erklären müssen, dass sie vor Drücken der Taste ins Browserfenster klicken müssen, kann man auch gleich per Klick starten.

Die Enter-Taste hat noch einen Nachteil: Sollte zufällig gerade der Weiter-Knopf ausgewählt sein, kämen die Teilnehmer zur nächsten Seite anstatt das Video zu starten.

Damit Sie das Video ansteuern können, benötigt es erstmal eine id:

<video width="512" height="288" controls controlsList="nodownload" id="video">
<source src="pro://1.Film.mp4" type="video/mp4" />
</video>

Und das JavaScript kann dann Tastendrücke abfangen und das Video starten. Hier mal für die Enter-Taste (KeyCode 13).

<script type="text/javascript">
function onKey(evt) {
  if (evt.keyCode == 13) {
    document.getElementById("video").play();
  }
}
SoSciTools.attachEvent(document, "keyup", onKey);
</script>

Comments

Vielen Dank für Ihre Antwort! Das hat mir schon einmal sehr geholfen.

Kann man irgendwo sehen, ob die Teilnehmer das Video auch wirklich abgespielt haben? Bzw könnte man einstellen, dass der "Weiter" Button verschwindet, und die nächste Seite des Fragebogens automatisch aufgerufen wird, sobald das Video zu Ende gespielt hat?

Außerdem wäre es für mein Experiment sehr wichtig, dass das Video nach dem Klick automatisch bis zum Ende abgespielt wird, die Teilnehmer also nicht mehr auf Pause oder sonstiges drücken kann. Wie stelle ich das am Besten ein?

Liebe Grüße,
Moritz

---

Für so viele Wünsche müssen Sie sich jetzt ein klein wenig in JavaScript und im Speziellen in Events einlesen. Sie werden sehen, dass das <video>-Element bei jeder Veränderung (Starten, Ende erreicht) ein Ereignis bzw. Event auslöst. An dieses kann man sich mittels SoSciTools.attachEvent() koppeln, so ähnlich wie im Beispiel oben. Nur wurde hier an ein Ereignis von "document" gekoppelt, nicht des Videos.

> Kann man irgendwo sehen, ob die Teilnehmer das Video auch wirklich abgespielt haben?

Wenn das Play-Event ausgelöst wird, speichern Sie mittels JavaScript in eine interne Variable (s. Anleitung) den Wert 1. Wenn das Ende erreicht wurde, speichern Sie den Wert 2 und ...

> Bzw könnte man einstellen, dass der "Weiter" Button verschwindet, und die nächste Seite des Fragebogens automatisch aufgerufen wird, sobald das Video zu Ende gespielt hat?

... verwenden Sie SoSciTools.submitPage(), damit es zur nächsten Seite weitergeht. Ich bin ziemlich sicher, dass es im Support dafür schon Beispiel-Code gibt, wenn Sie nach "video submitPage" suchen.

> Außerdem wäre es für mein Experiment sehr wichtig, dass das Video nach dem Klick automatisch bis zum Ende abgespielt wird, die Teilnehmer also nicht mehr auf Pause oder sonstiges drücken kann.

Dafür können Sie das Video-Element nach dem Start mittels removeAttribute() so ändern, dass das "control"-Attribut entfernt wird. Dadurch werden die Kontrollelemente (Pause u.s.w.) ausgeblendet.

Denken Sie aber bitte immer daran, dass der Teilnehmer das letzte Wort hat, was in seinem Browser passiert. Wenn jemand die Automatismen umgehen will, kann er das mit ein klein wenig Wissens um seinen Browser auch.