Kontrollelemente eines von extern eingebetteten Videos deaktivieren

Question

Guten Tag,

ich möchte in meinem Fragebogen ein Video präsentieren, das die Teilnehmer sich ansehen sollen. Während des Videos sollten die Teilnehmer allerdings nicht die Möglichkeit haben, das ganze zu pausieren oder vorzuspulen. Dafür hatte ich mich auf folgender Seite an dem Code zur optimierten Einbindung orientiert, damit die Kontrollelemente ausgeschaltet werden sobald das Video läuft und der "weiter"-button erst im Anschluss erscheint:

https://www.soscisurvey.de/help/doku.php/de:create:media

Leider funktionierte das nicht. Eine weitere Möglichkeit, die ich versucht habe (da das Video über unsere Universitätsmediathek mittels eines Links im Fragebogen eingebunden ist und nicht wie in dem JavaScript oben auf der Seite in Soscisurvey hochgeladen), war an die Video-URL im Einbettungscode "?controls=0" anzuhängen. So lassen sich bei eingebetteten YouTube-Videos die Kontrollelemente ausschalten. Auch das funktionierte leider nicht.
Nach längerem rumprobieren habe ich die Vermutung, dass der Videoplayer der Universitätsmediathek womöglich das JavaScript blockiert, bzw. man extern über das JavaScript keine Autorität hat, Änderungen an den Einstellungen vorzunehmen und deswegen das Ausschalten der Kontrollelemente blockiert wird. Es könnte aber auch vielleicht an etwas anderem liegen. Können Sie mir ggf. weiterhelfen?

Das hier ist der Einbettungscode des Videos:
(vor dem iframe bzw. /iframe sind jeweils Leerzeichen, damit er hier angezeigt wird)

< iframe width='570' height='321' style='width: 570px; height: 321px; border: 1px solid #ccc;' src='https://mediathek.hhu.de/embed/b6a0150c-1af8-404f-a681-be15b1847dc8' frameborder='0' allowfullscreen>< /iframe>

und das hier das angepasste JavaScript + Einbettungscode:
(bitte auch die Leerzeichen vor script bzw. /script beachten)

< iframe Id=S1 width='570' height='321' style='width: 570px; height: 321px; border: 1px solid #ccc;' src='https://mediathek.hhu.de/embed/b6a0150c-1af8-404f-a681-be15b1847dc8' frameborder='0' allowfullscreen>< /iframe>

< script type="text/javascript">
 console.log(playerInstance);

var video = document.getElementById("S1");
 
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  S1.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(S1, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 
< /script>

Zudem ist hier ein pretest-Link zu der Seite mit dem eingebetteten Video, falls das hilfreich ist.
https://www.soscisurvey.de/test196703/?act=RSKMvTFxoi3LjgaUMKke49Ax

Answer 1

(vor dem iframe bzw. /iframe sind jeweils Leerzeichen, damit er hier angezeigt wird)

Verwenden Sie beim Verfassen der Frage einfach den Knopf {}, um Code als solchen zu formatieren. Ich habe das oben einmal nachgeholt.

Das Problem, warum es nicht funktioniert ist folgendes: Sie binden das Video gar nicht als Video in die Fragebogen-Seite ein - also mit <video>. Stattdessen binden Sie eine externe Website ein (welche das Video zeigt) und zeigen diese quasi als Website in der Website.

Damit haben Sie aber keinerlei Kontrolle mehr über die Darstellung des Videos. Das lässt sich bei der <iframe>-Einbindung auch nicht ändern. Keine Chance. Denn die Browser blockieren das gezielt, damit man nicht ohne Wissen des Internetnutzers fremde Websites anzeigen und dabei manipulieren kann. Früher haben Internet-Kriminelle z.B. Banking-Websites in einem Frame angezeigt und dann bei der Überweisung den Zahlungsempfänger aus der "äußeren" Seite heraus geändert.

Comments

Vielen Dank für Ihre Antwort.
Lässt sich das Video denn alternativ Über <video> mit ausgeschalteten Kontrollelementen einbetten?

Wenn ich es versuche, es so einzubetten:
{
<video width="570" height="321" controls controlsList="nodownload" id="stimulus">
  <source src="https://mediathek.hhu.de/embed/b6a0150c-1af8-404f-a681-be15b1847dc8" />
</video>
}

wird das Video leider nicht angezeigt.

---

Soweit ich sehe, liefert die genannte URL keine Video-Datei, sondern eine HTML-Website, welche das Video dann beinhaltet. Als ich die Website aufrief, wurde das Video dann von folgenden URL nachgeladen:

https://mediathek.hhu.de/movies/207e205a731242899ff1be21f441eb8c/v_10.mp4

Ob diese URL allerdings dauerhaft funktioniert und im <video>-Tag verwendet werden kann, oder ob sie nach 10 Minuten ungültig wird, das kann ich nicht sagen. Das müssten Sie mit der IT der HHU klären.

---

Vielen Dank!
Damit scheint es zu funktionieren. Ich werde das aber nochmal mit der IT abklären, damit wir sichergehen können, dass alles ordnungsgemäß abgespielt wird.
Wie genau sind Sie an die URL oben gekommen? Das würde mich interessieren, da ich noch drei weitere Videos habe, die ich so einbetten muss.

---

Ich habe im Browser (Firefox) die Entwickler-Werkzeuge geöffnet und dort dann die Netzwerkanalyse. Dann die URL aufrufen, dann sieht man, welche Dateien alles geladen werden. Die mp4-Datei ist die gesuchte. Man kann den (ersten) Eintrag anklicken und die URL kopieren.

Dennoch: Prüfen Sie, den o.g. Link mal über einige Tage hinweg. Zusätzlich zur Klärung mit der Uni-IT.