"Controls" für ein Video teilweise einblenden

Question

Hallo Zusammen,

Ich würde gerne die "controls" für ein Video teilweise einblenden.

Ich würde gerne den Balken der den Fortschritt den Videos anzeigt einblenden und die restlichen Controls ausblenden.

Bisher verwenden ich diesen Code, leider blendet er alle "controls" aus:

<script type="text/javascript">
<!--
 
var video = document.getElementById("stimulus");
 
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});

Gibt es hierfür eine Lösung?

Vielen lieben Dank für eure Hilfe!

Answer 1

Prinzipiell können Sie über das Attribute controlsList genauer steuern, was der Player anzeigen soll. De factor ignorieren viele Browser allerdings vieles davon:

HTMLMediaElement controlsList Sample

Wenn Sie die Kontrollelemente wirklich (halbwegs) zuverlässig vorgeben möchten, müssen Sie das Video ohne Kontrollelemente einblenden und mittels JavaScript manuell einbinden, was Sie haben möchten. Für einen Fortschrittsbalken heißt das: Eine Box in einer zweiten Box und alle 0,1 Sek. die aktuelle Position des Videos abrufen und entsprechend die größe der inneren Box anpassen. Wenn die Fortschrittsanzeige auf Klicks reagieren soll, muss man auch den Klick per JavaScript gesondert verarbeiten.

Answer 2

Hallo,

Vielen Dank für Ihre Hilfe!

Habe mich dazu entschieden,die "Controls" ganz ausgeblendet zu lassen.

Leider habe ich nun festgestellt, dass dieser Befehlt auf allen Smartphones nicht funktioniert. Auf allen Browsern und Tablets (inkl. Safari) funktioniert es die "Controls" ganz oder zumindest nach klicken des "Play-Button" auszublenden.
Ruft man den Link allerdings über ein Smartphone auf, öffnet sich das Video immer im Fullscreen Modus und alle "Controls" werden eingeblendet. Verlässt man den Fullscreen Modus, hört das Video auf zu spielen.

Ich verwende diesen Code auf der Fragebogenseite:

option('layout','presenter');**

<video width="712" height="488" controls controlsList="nodownloadnofullscreen" id="stimulus" autoplay>
  <source src="PURVI.ogg" type="video/ogg" />
  <source src="PURVI.mp4" type="video/mp4" />
  <source src="PURVI.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>

Kann es sein, dass der automatische Fullscreen auf dem Smartpone irgendwie mit dem Pesenter-Layout zusammenhängt?

Gibt es eine Lösung hierfür eine Lösung?

Vielen lieben Dank

Comments

> Kann es sein, dass der automatische Fullscreen auf dem Smartpone irgendwie mit dem Presenter-Layout zusammenhängt?

Eher nicht, nein.

Ich würde eher vermuten, dass der Browser Ihres Smartphones das einfach sinnvoll findet. Kontrollieren Sie einfach mit einer Frage vom Typ "Gerät und erhobene Variablen", ob ein Mobilgerät zum Einsatz kommt.

Bei welchem Gerät und Browser tritt das mit dem Fullscreen denn auf?

---

Okay das werde ich checken, vielen Dank.

Es tritt bei IPhones im Safari Browser auf, auf dem IPad funktioniert es aber einwandfrei.

---

Ich kann nicht ausschließen, dass Safari das nachträge entfernen der Controls mittels folgender Zeile...

stimulus.removeAttribute("controls");

... ignoriert. Vermutlich würden die Elemente weggelassen, wenn Sie sie direkt aus dem HTML entfernen:

<video width="712" height="488" controlsList="nodownload nofullscreen" id="stimulus" autoplay>

Dann müssten Sie aber noch einen <button> zum Starten des Videos auf der Seite einfügen, falls das Autoplay nicht funktioniert.

Kurzer Hinweis: Ihnen fehlte noch ein Leerzeichen hier:

controlsList="nodownload nofullscreen"

---

Vielen Dank!

Es funktioniert die Elemente direkt auf dem HTML Code zu entfernen. Tatsächlich funktioniert in Safari leider das Autoplay nicht, weswegen ein Button zum starten des Videos sehr wichtig wäre.

Könnten Sie mir sagen wie man so einen Button erstellt bzw. einbindet?

---

Nun, im Prinzip ist es nur ein <button id="play"> mit ein wenig JavaScript-Code, der das Abspielen startet (unter dem o.g. JavaScript-Code):

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