Bedienelemente Video Handy

Question

Ich habe in meine Umfrage Videos integriert. Um sicherzustellen, dass alle Teilnehmenden jedes Video einmal ansehen, habe ich folgenden Code verwendet, der den "weiter" Button erst nach dem Anhören einblendet und die Bedienelemente nach dem Start ausblendet.

<video width="736" height="414" style="max-width: 100%" controls controlsList="nodownload" id="stimulus">
  <source src="Name.ogg" type="video/ogg" />
  <source src="Name.mp4" type="video/mp4" />
  <source src="Name.webm" type="video/webm" />
</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>

Bei Lapotp und Computer funktioniert das auch problemlos, nur leider auf dem Smartphone (iPhone, Safari) nicht. Hier schaltet das Video auf Vollbild und die Bedienelemente werden eingeblendet. Mithilfe anderer Forumsbeiträge habe ich versucht das Problem zu lösen, indem ich controls controlsList="nodownload nofullscreen" ergänzt habe. Damit verhindere ich zwar, dass das Video im Vollbildmodus erscheint, allerdings fehlt auch ein Abspielknopf.
Sobald ich den mithilfe von

var button = document.getElementById("play");
button.addEventListener("click", function() {
  video.play();
});

am Ende des Skripts einsetze, wird offenbar der Befehl "nofullscreen" übergangen und das Video schaltet wieder in den Vollbildmodus inklusive aller Bedienelemente.

Gibt es hierfür eine Lösung? Oder habe ich möglicherweise den Code für den Playbutton falsch eingesetzt?

Comments

> Hier schaltet das Video auf Vollbild und die Bedienelemente werden eingeblendet.

(a) Möchten Sie einmal einen Pretest-Link posten und mitteilen, ob Sie auf Android oder iOS getestet hatten?

(b) Die Klicken auf das Abspiel-Symbol, dann wechselt das Video in den Vollbildmodus, und wenn man es antippt, dann stehen die Bedienelemente zur Verfügung - verstehe ich das korrekt?

(c) Sie möchten nicht, dass die Befragten zurückspulen, Pausieren oder nach dem Abspielen nochmal starten können? Oder geht es nur um das Vorspulen?

Answer 1

a) https://www.soscisurvey.de/pDMu/index.php?i=MM8LYEUQWSJF&rnd=IZGM
Ich habe den Fragebogen mit iOS getestet.

b) Richtig. Das Video geht automatisch in den Vollbildmodus, sobald es angeklickt wird.

c) Richtig, es sollte weder vorgespult werden können, noch pausiert oder nach dem Abspielen erneut gestartet werden können.

Comments

Versuchen Sie bitte mal, den Fullscreen-Moduls durch einen zusätzlichen Parameter "playsinline" zu unterbinden: https://stackoverflow.com/questions/5054560/can-i-avoid-the-native-fullscreen-video-player-with-html5-on-iphone-or-android

Wenn das unter iOS nicht reicht, müsste man das Herumspulen evtl. explizit unterbinden, indem man beim Spulen mittes JavaScript immer wieder auf die aktuelle Stelle springt: https://stackoverflow.com/questions/4001635/html5-video-player-prevent-seeking

Auf Android tritt das Proble m.E. nicht auf.

---

Vielen Dank für die Hilfe! Durch die Ergänzung von

webkit-playsinline="true" playsinline="true"

in der ersten Zeile des Codes hat sich das Problem gelöst.