Videoeinbettung optimieren

Question

Guten Tag,

ich benutze in meiner Onlinestudie Videos, die folgend über einen Textbaustein eingebettet sind:

<iframe id="videoframe" style="border: 1px solid #ccc;width:570px;height:321px;" src="https://mediathek.hhu.de/embed/1f54b5fb-ed89-46f8-b456-7c3c83d527a8?hidecontrols=1" frameborder="0"></iframe>

<button onclick="document.getElementById('videoframe').contentWindow.postMessage('playvideo', '*');return false;" style="margin:auto;display:block" >Start</button>

Die Videos haben einen separaten Start-Button, auf den die Probanden klicken müssen, weil die Kontrollelemente deaktiviert sind und beim Autoplay-Modus einige Browser den Ton blockieren würden.
Ich würde gerne das Video ebenfalls zentriert auf dem Bildschirm anzeigen lassen. Zudem ist es wichtig, dass der Start-Button ausgeblendet wird, sobald darüber das Video gestartet wurde. Nach dem Video soll eine automatische Weiterleitung zur nächsten Fragebogen-Seite passieren und der "weiter"-Button sollte während der ganzen Zeit nicht vorhanden sein.

Leider reichen meine Kenntnisse mit JavaScript nicht aus um das zu realisieren. Können Sie mir dabei helfen?

Hier ist zudem ein pretest-Link zu einer Seite, die das Video anzeigt, wie es im Fragebogen dargestellt werden würde:

https://www.soscisurvey.de/test196703/?act=EJHAUKj7jkzOrIx2tLIipNgV

Liebe Grüße und vielen Dank!

Answer 1

Hallo,

was das ausblenden der Elemente angeht, schauen Sie doch mal hier, da hat jemand ein ganz ähnliches Problem schon mal gelöst und seinen Code bereitgestellt.

um das ganze zentral zu kriegen, benutzen Sie folgendes:

<p align="center"><iframe id="videoframe" style="border: 1px solid #ccc;width:570px;height:321px;" src="https://mediathek.hhu.de/embed/1f54b5fb-ed89-46f8-b456-7c3c83d527a8?hidecontrols=1" frameborder="0"></iframe></p>

Viele Grüße

Comments

siehe  unten

Answer 2

Vielen Dank!

Das Video wird jetzt mittig dargestellt und der "weiter"-Button ausgeblendet. Leider aber nicht der "Start"-Button und wenn das Video fertig ist, springt es noch nicht automatisch zur nächsten Seite weiter.

Der Code sieht jetzt wie folgt aus:

<p align="center"><iframe id="videoframe" style="border: 1px solid #ccc;width:570px;height:321px;" src="https://mediathek.hhu.de/embed/1f54b5fb-ed89-46f8-b456-7c3c83d527a8?hidecontrols=1" frameborder="0"></iframe></p>

<button onclick="document.getElementById('videoframe').contentWindow.postMessage('playvideo', '*');return false;" style="margin:auto;display:block" >Start</button>

<script type="text/javascript">
var video = document.getElementById("videoframe");
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});

</script>
<script>
var aud = document.getElementById("videoframe");
aud.addEventListener("ended", function() {SoSciTools.submitPage()});

</script>

Vermutlich befindet sich also ein Fehler in der Übertragung des Codes auf mein Anliegen.

Comments

Sie benutzen einen iFrame, um Ihr Video einzubetten, und der bereitet leider immer wieder Probleme, wenns es um Scripting-Rechte geht, ich gehe also davon aus, dass die Funktionen blockiert werden.
Was vielleicht eine Alternative wäre: Sie setzen direkt einen Timer, der los läuft, sobald der Startknopf gedrückt wurde. Dafür würden sie oben in Ihrem Button folgendes ersetzen:

onclick="document.getElementById('videoframe').contentWindow.postMessage('playvideo', '*');window.setTimeout(SoSciTools.submitPage, 5000);return false;"

die 5000 sind in diesem Fall Millisekunden, aber Sie wissen ja, wie lang Ihr Video ist. So könnte man das Problem umgehen. In diesem Fall sind die letzten 4 Zeilen in Ihrem Code überflüssig

---

Vielen Dank!

Das funktioniert sehr gut. Ist es denn möglich, dass auch der "Start"-Knopf verschwindet, nachdem er angeklickt wurde?

---

submitButtonsHide() versteckt tatsächlich nur den vor und zurück Knopf der Seite. Um den Button verschwinden zu lassen, ersetzen Sie oben bitte

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

---

Vielen dank noch einmal für Ihre Unterstützung. Das Skript tut, was es soll.
Bei der Testung des Fragebogens hat sich leider aber ein weiteres ein Problem aufgetan:
In einigen Browsern ist es möglich das Video auch per Klick auf das Video zu starten. Das ist an sich kein Problem, allerdings umgeht man dadurch den Timer des Start-Buttons, durch den automatisch die nächste Fragebogenseite aufgerufen wird, wenn das Video fertig ist. Dadurch lässt sich das Video beliebig oft ansehen und da der "weiter"-Knopf ausgeblendet ist, muss man es zwangsläufig auch ein zweites Mal über den "Start"-Knopf starten, damit man den Fragebogen weiter bearbeiten kann.

Gibt es eine Möglichkeit den Code so anzupassen, dass auch nach einem Klick auf das Video ein Timer beginnt, der nach Ende des Videos automatisch zur nächsten Fragebogenseite weiterleitet? Das würde die oben genannten Probleme umgehen.

Mein bisheriger Code sieht nun so aus:

<p align="center"><iframe id="videoframe" style="border: 1px solid #ccc;width:885px;height:500px;" src="https://mediathek.hhu.de/embed/1f54b5fb-ed89-46f8-b456-7c3c83d527a8?hidecontrols=1" frameborder="0"></iframe></p>

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



<script type="text/javascript">

var video = document.getElementById("videoframe");
 
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
 
</script>