Automatische Wiedergabe von HTML5-Videos auf dem iPhone

89

Ich habe ein seltsames Problem. Ich versuche eine Website mit einem geloopten Hintergrundvideo zu erstellen. Der Code sieht folgendermaßen aus:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
Erweitern Sie das Snippet

Dies funktioniert in den meisten Browsern einwandfrei (IE hat Probleme mit dieser Objektanpassung, aber es macht mir nichts aus), aber auf dem iPhone wird das Video nicht automatisch wiedergegeben, auf dem iPad jedoch. Ich habe bereits die neuen Richtlinien für iOS gelesen und denke, dass ich die Anforderungen erfülle (andernfalls wird das iPad nicht automatisch wiedergegeben). Ich habe einige andere Tests durchgeführt:

  • Das Entfernen überlagernder Divs behebt das Problem nicht
  • Durch Entfernen des Z-Index wird dies nicht behoben
  • Wifi oder Cellular machen keinen Unterschied
  • Die Größe von Videodateien macht auch keinen Unterschied

Mache ich es falsch oder spielt das iPhone Videos einfach nicht automatisch ab und erfordert immer Interaktion? Ich interessiere mich nur für iOS 10, ich weiß, dass die Anforderungen für iOS 9 unterschiedlich waren

ios html video webkit autoplay SeBa
quelle
Möglicherweise finden Sie hier Hilfe: stackoverflow.com/questions/41360490/… Ich persönlich habe noch kein Video zum automatischen Abspielen auf einem iPhone, selbst nachdem ich all diese Tipps und Apple-Richtlinien befolgt habe.
Mark
Ich habe Stunden gebraucht, um das herauszufinden. Um zu versuchen, Stunden von allen anderen zu sparen, habe ich meine Ergebnisse in einem Blog zusammengefasst. Ich hoffe es hilft. medium.com/@BoltAssaults/…
BoltCoder

Antworten:

216

Hilft playsinlineAttribut?

Folgendes habe ich:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Siehe den Kommentar playsinlinehier: https://webkit.org/blog/6784/new-video-policies-for-ios/

Pete Florence
quelle
1
Halleluja! Vielen Dank dafür, hatte etwa ein Dutzend andere Lösungen ohne Erfolg ausprobiert.
Tolmark
23
playsinlinearbeitete für mich in Verbindung mit mutedder Berücksichtigung der Low-Power-Modus Eigenart auf dem iPhone
Ken
1
Das ist die Antwort.
JCraine
1
playsinlineDen Tag gerettet !!!! Danke, Mann. Übrigens verlangen neue Browserrichtlinien, dass ein Video, wenn Sie es automatisch starten möchten, stummgeschaltet gestartet wird, da dies sonst nicht möglich ist. +1 bis @ken Beispiel für Chrome: [ developer.google.com/web/updates/2017/09/…
Nuno Prata
18
Wenn Sie React verwenden, beachten Sie, dass das Attribut playsinlinein camelCase geschrieben werden muss : playsInline. Sonst funktioniert es nicht.
Quentin D
62

iOs 10+ ermöglichen die automatische Inline-Wiedergabe von Videos. Sie müssen jedoch den "Energiesparmodus" auf Ihrem iPhone deaktivieren.

Dilip Godhani
quelle
2
toller Tipp, aber ich habe eine Frage dazu, die ich eingereicht habe: stackoverflow.com/questions/50400902/…
Mathieu
7
Ich habe die letzte Stunde damit verbracht zu verstehen, warum meine Videos nicht automatisch abgespielt wurden. Danke dafür!
Lior
2
Danke dafür!
Nikita Rogatnev
4
Es ist erwähnenswert, dass wir das Gerät des Benutzers nicht steuern und den Energiesparmodus nicht aktivieren können. Das einzige, was wir tun können, ist den Benutzer aufzufordern, den Energiesparmodus auszuschalten, um eine bessere Erfahrung
Muhammad Osama
1
Ist mir auch passiert und hat mich verrückt gemacht, bis ich deinen Beitrag gefunden habe. Ich habe mir bereits die Spezifikationen von Safari 11 und 11.1 angesehen, wenn sie die automatische Wiedergabe möglicherweise vollständig deaktiviert haben, aber es war nur der Energiesparmodus ... ein Entwicklerleben kann schwierig sein. :-)
haeki
7

Hier ist der kleine Hack, um all die Probleme zu überwinden, die Sie bei der automatischen Wiedergabe von Videos auf einer Website haben:

  1. Überprüfen Sie, ob das Video abgespielt wird oder nicht.
  2. Lösen Sie die Videowiedergabe bei Ereignissen wie Klicken oder Berühren des Körpers aus.

Hinweis: Einige Browser lassen die automatische Wiedergabe von Videos nur zu, wenn der Benutzer mit dem Gerät interagiert.

Skripte, mit denen überprüft werden kann, ob Videos abgespielt werden, lauten wie folgt: 

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Und dann können Sie das Video einfach automatisch abspielen, indem Sie Ereignis-Listener an den Körper anhängen:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Hinweis: Das autoplayAttribut ist sehr einfach und muss dem Video-Tag bereits hinzugefügt werden, außer diesen Skripten.

Sie können das Arbeitsbeispiel mit Code hier unter diesem Link sehen:

So spielen Sie Videos automatisch ab, wenn sich das Gerät im Energiesparmodus / Datenspeichermodus / Safari-Browser befindet

Shakti
quelle