mp4-Video im HTML-Tag

Hallo,

ich habe ein mp4-Video in ein Modul auf Position 'Banner' gesetzt ycsh80.de und im JCE Codeeditor folgendes eingegeben:

<video autoplay="autoplay" style="width: 100%; height: auto;">
<source src="images/stories/wellen.mp4" type="video/mp4" />
</video>

Auf dem Notebook (WLAN, LTE) funktioniert das mit Firefox, Chrome und Edge. Das Video startet automatisch. controls="controls"

Auf dem iPhone und iPad (WLAN, LTE) funktioniert es mit Safari und Firefox NICHT. Es gibt nur ein Standbild. Das Video startet NICHT automatisch. Warum?

Erst wenn ich mit controls="controls" den Player manuell starte, läuft das Video. Die Player-Zeile sieht im Banner natürlich sch... aus, geht garnicht.

Android kann ich nicht testen.

Hat jemand eine Idee?

vG

Ja, im Link zu #2 steht viel drin. Wichtig:

Zitat

I"gnores the autoplay attribute by default,.."

Obwohl ich das am Gerät ausdrücklich erlaubt habe! Apple hat - so ist zu lesen - die Selbstverpflichtung Downloadkosten in Grenzen zu halten und verhindert autoplay.

Das plg von #3 kenne ich von einer anderen Anwendung.

Vielen DanK #2, #3!

Folgendes muss im Code ergänzt werden:

wichtig:

muted="muted" oder Video ohne Audiospur (Spaßbremse!)

und

playsinline="playsinline"

also so:

<video autoplay="autoplay" muted="muted" playsinline="playsinline" style="width: 100%; height: auto;">
<source src="images/stories/wellen.mp4" type="video/mp4" />
</video>

vG

Hi, ich nochmal!

Diesen interessanten Code habe ich noch gefunden und installiert auf ycsh80.de

Lösungsansatz: Safari wird eine img angeboten. Dann gehts auch ohne 'muted=muted'.

Natürlich kommt es zu Ladezeiten und Autoplay ist im 1. Anlauf manchmal unzuverlässig (cache?).

Unter den Windows-Browsern läuft das Video mit Ton und stoppt am Ende.

Safari selbst bleibt stumm läuft dafür aber in loop, ohne dass das eingestellt ist

Eine Anweisung 'no-loop', 'once' o.ä. finde ich nicht. Safari lädt die Schleife aber aus dem Cache.

<video autoplay="autoplay" playsinline="playsinline" id="video-tag" style="width: 100%; height: auto;"><source src="images/stories/wellen2.mp4" type="video/mp4" /></video>
<img src="images/stories/wellen2.mp4" alt="" id="img-tag" style="width: 100%; height: auto;" />

<script type="text/javascript">
//Safari antwortet nur auf "Safari" nicht aber auf "Chrome"
//Chrome antwortet auf "Safari" UND auf "Chrome"
//Mit "Safri" wird 'video-tag' gesperrt (display= "none") und stattdessen 'img-tag' abgespielt (loop)
function BrowserDetection() {
if (navigator.userAgent.indexOf("Safari") >= 0 && navigator.userAgent.indexOf("Chrome") < 0) {
document.getElementById('video-tag').style.display= "none";
} else {
document.getElementById('img-tag').style.display= "none"; }
}
BrowserDetection();
</script>

Es wäre nett, wenn ich Rückmeldungen zu anderen Browsern als Windows Firefox, Chrome oder Edge bekommen könnte.
Z.B. Opera, Android und Mac.

vG

Hallo Stef,

danke für die Rückmeldung!

Bei Safari iOS funktioniert es immer.
Bei meinen Windows-Browsern Firefox, Chrome, Edge funktionieniert es immer unterschiedlich.
Mal startet Firefox auf Anhieb und manchmal muss ich erst einen anderen Menüpunkt wählen und dann zurück gehen.
Restart oder Cache löschen hat keine Auswirkung.
Beim nächsten Mal beobachte ich das bei Crome/Edge, obwohl es zuvor noch lief.

Autoplay ist nicht sehr zuverlässig, kann man nicht wirklich verkaufen.

War aber ein netter Versuch ohne Erweiterung zu arbeiten, ich habe es aber wieder heraus genommen.

vG