Probleme mit extern eingebetteten Videos und Google Chrome

Question

Guten Tag,

in meinem Fragebogen sollen Videos dargestellt werden, die in der Mediathek der Universität hinterlegt und wie folgt in die Studie eingebettet sind:

<p align="center"><iframe id="videoframe" style="border: 1px solid #ccc;width:885px;height:500px;"  src="https://mediathek.hhu.de/embed/7a8c0e6c-06c8-4982-91ea-cfb95aa3e671?hidecontrols=1" frameborder="0"></iframe></p>

<button id="button" onclick="document.getElementById('videoframe').contentWindow.postMessage('playvideo', '*');window.setTimeout(SoSciTools.submitPage, 129000);this.style.display = 'none';return false;" style="margin:auto;display:block" >Start</button>

<script type="text/javascript">

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

SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});

</script>

Das ganze ist etwas umständlich, weil die Kontrollelemente ausgeschaltet sind, damit die Probanden das Video nicht (oder zumindest nur über Umwege) pausieren, vorspulen etc. können. Da nicht alle Browser es zulassen, dass man das Video mit einem Klick darauf startet, gibt es den "Start"-Button und nachdem das Video durchgelaufen ist springt der Fragebogen automatisch zur nächsten Seite weiter, damit das Video nur einmal zu sehen ist. So funktioniert das ganze eigentlich sehr gut.

Es gibt allerdings zwei größere Probleme die noch auftreten.

1. Wenn Probanden das Video doch über einen Klick darauf starten, springt der Fragebogen anschließend nicht zur nächsten Seite weiter. Gibt es hier eine Möglichkeit das JavaScript so zu erweitern, dass die nächste Seite automatisch geladen wird, wenn das Video nicht durch den "Start"-Button sondern durch den direkten Klick auf das Video gestartet wird? Dann wäre es egal, worauf die Probanden klicken.

2. Wir haben viele Browser getestet und in den meisten funktionieren Videos und "Start"-Button. Eine Ausnahme bildet leider Google Chrome: Hier lassen sich die Videos zwar mit einem direkten Klick auf das Video starten, dann springt der Fragebogen aber natürlich nicht weiter. Zudem starten die Videos nicht richtig, wenn der vorgesehene "Start"-Button verwendet wird. Der Bildschirm bleibt schwarz und nach einer Weile wird die nächste Seite automatisch geladen. Google Chrome hat aber keine Probleme damit, wenn ich die Videos direkt in der Mediathek starte. Das Problem tritt zudem mit Windows und MacBooks auf.
   Gibt es etwas, das man dagegen tun kann? Oder wissen Sie zumindest, woher dieses Problem stammt?

Hier ist noch ein Pretest-Link zu einem Fragebogen mit nur dem Video:
https://www.soscisurvey.de/test196703/?act=yZYQnIcC9bLYS7Mz6AZtoe2g

Vielen Dank schon einmal im Voraus!

Answer 1

Wenn Probanden das Video doch über einen Klick darauf starten, springt der Fragebogen anschließend nicht zur nächsten Seite weiter.

Ich sehe in Ihrem Code im Moment nur einen Aufruf von SoSciTools.submitPage(), wenn man per Klick auf den Knopf startet.

Meine Empfehlung wäre: Machen Sie das nicht mit einem Timer, sondern verwenden Sie das "ended" Event des Videos:

video.addEventListener("ended", SoSciTools.submitPage);

Zudem starten die Videos nicht richtig, wenn der vorgesehene "Start"-Button verwendet wird.

Dann werfen Sie doch mal einen Blick in die JavaScript-Fehlerkonsole von Chrome und schauen Sie, was dem Browser nicht passt.

Falls Sie nicht weiter kommen, können Sie auch gerne einen Pretest-Link direkt (!) zur betroffenen Fragebogen-Seite posten.

Comments

Vielen Dank für Ihre Antwort!

Ich habe leider wenig Kenntnisse von JavaScript. Wie muss ich den Befehl in meinen Code einbauen, damit er gültig ist, egal ob man das Video per Klick darauf oder per Klick auf den "Start"-Button startet?

Der Pretest-Link oben führt direkt zu der betreffenden Seite. Bzw. der Fragebogen besteht nur aus einer Seite mit dem Video. Da meine Kenntnisse mit Programmiersprachen wie gesagt eingeschränkt sind, bezweifle ich allerdings, dass ich durch die Auskunft der Fehlerkonsole wirklich klüger wäre.

---

>  Wie muss ich den Befehl in meinen Code einbauen, damit er gültig ist

Einfach in einem <script>-Block außerhalb aller Funktionen. Wichtig ist, dass Sie die Variable video vorher definiert haben.

ABER: Ich sehe gerade, dass Sie das Video nicht über <video> einbinden, sondern per <iframe>. In diesem Fall haben Sie mittels JavaScript keinerlei Einfluss darauf, was das Video macht (z.B. es starten) noch bekommen Sie mit, wenn das Video endet.

Das blockieren Browser (Stichwort: Cross-Site Scripting), weil sich damit Schindluder treiben ließe.

---

> ABER: Ich sehe gerade, dass Sie das Video nicht über <video> einbinden, sondern per <iframe>. In diesem Fall haben Sie mittels JavaScript keinerlei Einfluss darauf, was das Video macht (z.B. es starten) noch bekommen Sie mit, wenn das Video endet

Das heißt es gibt keine direkte Möglichkeit, die Fragebogenseite so zu gestalten, dass nach Ende des Videos automatisch die nächste Seite geladen wird. Man müsste also immer über Umwege gehen (z.B. einen ungefähren Timer etc.)?

---

Entweder das - oder man klärt die Nutzungsrechte mit dem Rechteinhaber und bindet das Video dann direkt mittels <video> ein. Aber sobald man mit <iframe> arbeitet, ist jegliche Kommunikation zwischen Fragebogen und Video blockiert.

---

Gut zu wissen, vielen Dank!