Video automatisch im Vollbildmodus abspielen lassen

Question

Hallo allerseits!

Ich hänge an einem kleinen Problem bezüglich der Videowiedergabe. Ich würde gerne das Video automatisch in Vollbildmodus abspielen lassen, sobald die Seite aufgerufen wird (die Bedienelemente werden schon korrekt ausgeblendet).
Hier mein aktueller Code:

<p style="text-align: center">
<video align="center" width="800" height="520" controls controlsList="nodownload" id="stimulus" autoplay >
 <source src="Bsp_Vid.mp4" type="video/mp4" />
 <source src="Bsp_Vid.webm" type="video/webm" />
 <source src="Bsp_Vid.ogg" type="video/ogg" />
</video>
</p>

<script>    
var video = document.getElementById("stimulus");

SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});

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

SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

</script>

Ich habe bereits eine alte Antwort auf die Frage gefunden, allerdings funktioniert der dort verwendete Code nicht (siehe unten) und auch mit CSS Codes aus dem Internet hab ich mein Ziel nicht erreicht.

Anderer Code, der nicht geholfen hat:

var elem = document.getElementById("stimulus");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

Vielleicht können Sie mir weiterhelfen!
Vielen Dank im Voraus.

Comments

Posten Sie doch bitte einen Pretest-Link direkt (!) zur betroffenen Seite, dann können wir uns das im Kontext ansehen.

Im ersten Code sehe ich jetzt nichts, was mit Vollbild zu tun hätte, das ist nur für das Aus- und Einblenden des Weiter-Knopfes. Also lassen Sie den "Anderer Code, der nicht geholfen hat" bitte auch im <script>-Teil.

---

Danke für die schnelle Antwort.
Es war noch kein Code eingefügt für den Vollbildmodus.
Hier der Pretest-Link:

https://www.soscisurvey.de/BA_lineups/?act=AmHkAHcMbeo0Eh3e3MQ0Y92u

Answer 1

Die JavaScript-Konsole des Browsers (Firefox) zeigt die Meldung

Uncaught (in promise) TypeError: Fullscreen request denied

Heißt auf Deutsch: Der Browser hat das Ersuchen um eine Vollbild-Darstellung abgelehnt. Das machen die Browser wohl automatisch, wenn der Fullscreen-Request nicht durch eine Benuzteraktion ausgelöst wurde, sondern von der Seite direkt vorgegeben wurde.

Eine mögliche Lösung wäre, dass man auf der vorhergehenden Seite den echten Weiter-Knopf ausblendet und stattdessen mit einem mit "Weiter" beschrifteten Knopf das Video sichtbar macht und per JavaScript im Fullscreen-Modus startet.

Comments

Alles klar! Vielen Dank schon einmal.
Den Weiterknopf ausblenden kriege ich hin.

Könnten Sie mir bezüglich des zweiten Teils aushelfen? Ich weiß, dass man neue Buttons erstellen kann, aber mir fällt nichts ein, wie ich einen erstellen könnte, der das Video sichtbar macht und dann so startet, wie ich möchte.

---

>  Ich weiß, dass man neue Buttons erstellen kann, aber mir fällt nichts ein, wie ich einen erstellen könnte

Der Knopf kann JavaScript-Funktionen auslösen:

<button id="videoButton" type="button">Weiter</button>

<script type="text/javascript">
function startVideo() {
  var video = document.getElementById("stimulus");
  video.style.display = "";  // Einblenden, wenn man es vorher ausgeblendet hatte
  video.play();
}

document.getElementById("videoButton").addEventListener("click", startVideo);
</script>

---

Tausend Dank, ich habe den Code inzwischen erweitert. Es gibt jetzt auf der einen Seite sozusagen drei Teile:

Den neuen Knopf:

<div style="text-align: center"><script type="text/javascript">
<!--
SoSciTools.submitButtonsHide();
// -->
</script>

<button id="videoButton" type="button">Video</button> 

<script type="text/javascript">
function startVideo() {
  var video = document.getElementById("stimulus");
  video.style.display = "";  // Einblenden, wenn man es vorher ausgeblendet hatte
  video.play();
}

document.getElementById("videoButton").addEventListener("click", startVideo);
</script></div>

Die Anweisung, das Video auszublenden:

<script type="text/javascript">
<!--
 
// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("stimulus");
    // Ausblenden
    content.style.display = "none";
  }
);
 
// -->
</script>

Und den Befehl, das Video wieder einzublenden und zu starten:

<p style="text-align: center">
<video align="center" width="800" height="520" controls controlsList="nodownload" id="stimulus">
 <source src="Bsp_Vid.mp4" type="video/mp4" />
 <source src="Bsp_Vid.webm" type="video/webm" />
 <source src="Bsp_Vid.ogg" type="video/ogg" />
</video>
</p>

<script>    
var video = document.getElementById("stimulus");

SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});

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

SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

var elem = document.getElementById("stimulus");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

</script>

Im letzten Teil ist auch der eigentliche Code für den Fullscreen drin. Es funktioniert alles, bis auf den Fullscreen... Meine Konsole (Opera) sagt mir immer noch: "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture."

Habe ich irgendwo einen Fehler drin...?
(Gleicher Pretest Link wie vorhin)