html video tag, controll button verschwinden?
Hallo zusammen
ich habe ein iframe, welches ein video zeigt. dieses ist mittels html video tag eingebunden.
die controll button, play, stop usw. erscheinen zwar kurz, werden aber wieder ausgeblendet. ich kann sie nicht mehr einblenden.
hat jemand eine idee an was das liegt?
der html tag
<video id="video" autoplay="" controls playsinline="" muted="" style="
"></video>
2 Antworten
Warum ein IFRAME? Oder ist die Seite mit dem VIDEO-Tag nicht von dir? Dann kann dort natürlich auch noch ein Javascript eingebunden sein, was die Steuerelemente wieder ausblenden.
Ansonsten probiere auch mal controls="controls" aus, auch wenn das eigentlich schon so als verkürztes Attribut funktionieren sollte.
Das Standardverhalten des Videoplayer, der in webkit-basierten Browsern / Firefox / und sicherlich noch anderen Browsern integriert sind, sieht vor, dass die Kontrollleiste während der Wiedergabe ausgeblendet wird. Via Mouseover, Fokussierung (via Tastatur) oder Touch wird sie wieder eingeblendet.
Da du für dein Video die automatische Wiedergabe aktiviert hast, wird die Kontrolleiste nur sehr kurz angezeigt.
Du könntest nun:
a) dich nach einem anderen Videoplayer umschauen, der dir womöglich mehr Kontrolle über die Kontrollleiste gibt oder bei dem der Aufbau anders ist (Kontrolleiste immer außerhalb der Videofläche).
b) Dir eine eigene Kontrollleiste bauen und die Standardleiste deaktivieren. Die Grundfunktionalitäten für Play, Pause, Stop sind auch nicht schwer zu implementieren.
Beispiel:
<!doctype html>
<title>Example</title>
<body>
<video autoplay id="video-player" muted>
<!-- source -->
</video>
<nav aria-label="Video player control bar">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
<button id="stop-button">Stop</button>
</nav>
<script>
const player = document.getElementById("video-player");
let loaded = false;
player.addEventListener("loadeddata", _ => {
loaded = player.readyState >= 3;
});
document.getElementById("play-button").addEventListener("click", _ => {
loaded && player.play();
});
document.getElementById("pause-button").addEventListener("click", _ => {
player.pause();
});
document.getElementById("stop-button").addEventListener("click", _ => {
player.pause();
player.currentTime = 0;
});
</script>
</body>
Schau dir für Weiteres dazu die Interfaces HTMLMediaElement und HTMLVideoElement an, denn sie dienen als JavaScript-Schnittstellen zum Videoplayer.
Die äußere Erscheinung der Kontrollleiste könnte man anschließend noch mit CSS individueller gestalten. So etwas überlasse ich allerdings gänzlich dir.