Video im Vollbildmodus ohne Pausierung/Zurückspülen

Question

Guten Tag,

ich suche nach einer Möglichkeit, meine Videos im Vollbildmodus abspielen zu lassen. Dabei sollen die Probanden nach Klicken des "Play-Buttons", dass Video weder pausieren noch zurückspulen können.

Bisher habe ich folgenden Code implementiert:

<video width="768" height="432" controls controlsList="nodownload" id="stimulus">
  <source src="ID8_vid.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
<!--
var video = document.getElementById("stimulus");

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

// -->
</script>

Durch diesen Code können die Probanden, nach Klicken des "Play-Buttons" das Video nicht stoppen und auch nicht zurückspulen.

Wenn ich die Funktion für den Vollbildschirmmodus zulasse, dann besteht jedoch diese Möglichkeit.

Wie muss ich den Code ändern, dass 1. das Video im Vollbildmodus abgespielt wird und 2. die Probanden das Video weder pausieren noch zurückspulen können?

Danke und viele Grüße!

Comments

Wie sieht es denn aus, wenn Sie in der ersten Zeile das "controls" entfernen?

Zum Abspielen müssten Sie dann evtl. noch einen extra Knopf mittels <button> auf der Seite einfügen.

<button type="button" onclick="document.getElementById('stimulus').play()">

Nur mal testweise ...

---

Danke für die Idee. Wenn ich das mache, dann erscheint der Play-Button leider kaum sichtbar außerhalb des Videos (am unteren Seitenrand).

---

Ich hatte je geschrieben, dass es erstmal um einen Test geht. Sind die Bedienelemente jetzt weg?

Wenn ja, dann kann man darauf aufbauen. Den Knopf können Sie ja mittels CSS nach Belieben platzieren und gestalten.

---

Ja die Bedienelemente sind weg.

Answer 1

Bedienelemente sind weg.

Wenn man das "controls" im <video>-Tag weglässt, muss man dafür sorgen, dass die Befragten das Video irgendwie starten können. Ein automatisches Starten unterbinden viele Browser, v.a. auf Mobilgeräten, heute. Insbesondere im Zusammenhang mit Vollbild.

Entsprechend muss man irgendwie auf der Seite einen Knopf platzieren (das kann auch eine Grafik sein), welche dann per JavaScript das Video startet.

Comments

Den "Play-Button" hätte ich mit "controls" an gewünschter Stelle. Mir geht es jedoch primär darum, dass das Video größer bzw. im Vollbidmodus ist.

---

Sie haben die Auswahl: Überlassen Sie dem Browser die Gestaltung des Video-Players (dann aber mit einem Pause-Knopf, etc.) oder möchten Sie selbst entscheiden, was gezeigt wird.

Wenn Sie selbst entscheiden möchten, dann sehen Sie sich mal CSS position: absolute an, um den Knopf an die gewünschte Stelle zu bekommen.