Die automatische Wiedergabe von Videos funktioniert in Safari und im Chrome-Desktop-Browser nicht

134

Ich habe ziemlich viel Zeit damit verbracht herauszufinden, warum Videos wie hier eingebettet sind:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Startet die Wiedergabe automatisch, sobald die Seite in FireFox geladen wurde, kann jedoch in Webkit-basierten Browsern nicht automatisch wiedergegeben werden. Dies geschah nur auf einigen zufälligen Seiten. Bisher konnte ich die Ursache nicht finden. Ich vermute einige nicht geschlossene Tags oder umfangreiche JS, die von CMS-Editoren erstellt wurden.

Adam Bubela
quelle
funktioniert es manchmal oder überhaupt nicht funktionieren ... hier ist ein Beispiel w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay , das ich mit Chrome überprüfe, und es funktioniert.
Tanaydin
Auf einigen Seiten funktioniert es überhaupt nicht
Adam Bubela
Angesichts des gleichen Problems hat es vor einer Woche gut funktioniert und ohne Änderung hat es einfach aufgehört zu funktionieren. Vielleicht ist es ein Browser-Update, sehr ärgerlich, alle Video-Tags manuell über Javascript
abspielen zu müssen
Funktioniert nicht für mich in Chrome.
Bob der Baumeister

Antworten:

260

Die beste Lösung, die ich bekommen konnte, war das Hinzufügen dieses Codes direkt nach dem </video>

<script>
    document.getElementById('vid').play();
</script>

... nicht schön, aber irgendwie funktioniert.

UPDATE In letzter Zeit können viele Browser die Videos nur bei ausgeschaltetem Ton automatisch wiedergeben. Daher müssen Sie muteddem Video-Tag auch Attribute hinzufügen

<video autoplay muted>
...
</video>
Adam Bubela
quelle
1
Oder Sie können mit jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…
Penguin
8
Oder so:$("video[autoplay]").each(function(){ this.play(); });
Martin
2
Immer noch ein Problem, wenn die Entwickler
google.com/web/updates/2017/09/…
5
Dies wird nicht mehr funktionieren ohne Benutzerinteraktion
AFAIK
siehe diese stackoverflow.com/questions/43570460/…
Leandro H Agostinho
93

Nachdem die in play()den anderen Antworten vorgeschlagene jQuery- oder DOM-Maniupulation verwendet wurde, funktionierte sie in Chrome für Android (Version 56.0) immer noch nicht (Video wurde nicht automatisch abgespielt).

Gemäß diesem Beitrag in developer.google.com , Ab Chrome 53, wird die Option für die automatische Wiedergabe vom Browser respektiert, wenn das Video stummgeschaltet ist .

Durch die Verwendung von autoplay mutedAttributen in Video-Tags kann das Video ab Version 53 in Chrome-Browsern automatisch wiedergegeben werden.

Auszug aus dem obigen Link:

Die stummgeschaltete automatische Wiedergabe von Videos wird von Chrome für Android ab Version 53 unterstützt. Die Wiedergabe für ein Videoelement wird automatisch gestartet, sobald beide autoplayangezeigt mutedwerden und [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
  • Die stummgeschaltete automatische Wiedergabe wird von Safari unter iOS 10 und höher unterstützt.
  • Autoplay, ob stummgeschaltet oder nicht, wird auf Android bereits von Firefox und UC Browser unterstützt: Sie blockieren keinerlei Autoplay.
RAM
quelle
3
Ich hatte dieses Problem in Safari 11, wo ein Hintergrundvideo (kein Audio) nicht automatisch abgespielt wurde. Hinzufügen mutedund autoplayden Trick gemacht. Vielen Dank!
Dmbaughman
1
Warum funktioniert dann Autoplay mit eingeschaltetem Sound für YouTube? Es hat seit der Gründung der Site so funktioniert.
Xavier
32

Es kommt vor, dass Safari und Chrome on Desktop die DOM-Manipulation um das Video-Tag nicht mögen. Sie lösen die Wiedergabereihenfolge nicht aus, wenn das Autoplay-Attribut festgelegt ist, selbst wenn das Canplaythrough-Ereignis ausgelöst wurde, wenn sich das DOM um das Video-Tag nach dem ersten Laden der Seite geändert hat. Grundsätzlich hatte ich das gleiche Problem, bis ich eine .wrap () jQuery um das Video-Tag löschte und danach wie erwartet automatisch wiedergegeben wurde.

Arnaud Leyder
quelle
2
Guter Aufruf, dass es mit .wrap () nicht funktioniert. Soweit ich das beurteilen kann, benötigt der Code jedoch .get (0), um zu funktionieren: $ ("# vid"). Get (0) .play ();
Mattsoave
3
@mattsoave .get(0)oder nur$('#vid')[0].play()
pmrotule
Oktober 2017: Videos, die trotz Attribut im Tag nicht automatisch wiedergegeben werden, sind in Safari immer noch ein Problem. Die Verwendung von [0] .play (), wie von mattsoave / pmrotule vorgeschlagen, löste das Problem.
Don Cullen
25

Google hat gerade seine Richtlinien für die automatische Wiedergabe von Videos geändert muted

Sie können hier überprüfen

Also einfach stumm hinzufügen

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>
Mooga
quelle
John Palletts Kommentar zur neuen Politik . Er ist Produktmanager und Media Muter von Google Chrome .
Doomjunky
24

Für mich war das Problem, dass das mutedAttribut innerhalb des videoTags hinzugefügt werden musste . Dh:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`
GarryW
quelle
Funktioniert für das neueste Chrome unter Windows8
vladkras
Auf Crome, wenn ich gedämpften Deaktivierungssound hinzufüge. Ich will das nicht
lisarko8077
17

In Chrome ist die automatische Wiedergabe von Videos mit eingeschaltetem Ton nicht zulässig. Fügen Sie muteddem videoTag daher ein solches Attribut hinzu

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>
Abdul Basit
quelle
3
Das fügt nichts Neues hinzu. Die akzeptierte Antwort erwähnt dies bereits. Auch die zweite Antwort geht ins Detail.
Samuel Philipp
12

Ich habe gerade das gleiche Problem mit meinem Video

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Nach der Suche habe ich eine Lösung gefunden:

Wenn ich die Attribute "Preload" auf "true" setze, wird das Video normal gestartet

Thomas Lohner
quelle
Das Preload-Attribut wird vom Browser ignoriert, wenn die automatische Wiedergabe vorhanden ist.
Sedat Başar
9

Das Hinzufügen des folgenden Codes am Ende der Seite hat bei mir funktioniert. Ich weiß nicht warum es funktioniert :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);
sanath_p
quelle
2
Der Grund dafür ist, dass Sie darauf warten, dass das Video in den Puffer geladen wird, und es dann abspielen.
Joseph Briggs
9

Versuche dies:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>
Ishan Lakshitha
quelle
5

var video = document.querySelector('video'); video.muted = true; video.play()

Nur diese Lösung hat mir geholfen, <video autoplay muted ...>...</video>hat nicht funktioniert ...

Ant0ha
quelle
3

Keine der anderen Antworten hat bei mir funktioniert. Meine Problemumgehung bestand darin, einen Klick auf das Video selbst auszulösen. hacky (wegen des Timeouts, das benötigt wird), aber es funktioniert gut:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);
Stijn Geukens
quelle
Auch bei Chrome hat nichts funktioniert. Mit dem obigen .play () - Fix (Hack) erhielt ich die Meldung "Nicht gefangen (im Versprechen) DOMException: Die play () -Anforderung wurde durch einen Aufruf von pause () unterbrochen." in der Konsole. Es gab einige andere jQuery-Funktionen auf der Seite, sodass ein Timer Chrome genügend Zeit geben würde, sich selbst zu sortieren. Es funktionierte. Ich habe einen 0,5-Sekunden-Timer in $ (Dokument) eingestellt. Bereits ()
Von Orbonia
3

Wir haben kürzlich ein ähnliches Problem mit einem eingebetteten Video behoben und festgestellt, dass die Attribute für die automatische Wiedergabe und die Stummschaltung für unsere Implementierung nicht ausreichen.

Wir haben dem Code ein drittes "playinline" -Attribut hinzugefügt, das das Problem für iOS-Benutzer behoben hat.

Dieser Fix ist spezifisch für Videos, die inline abgespielt werden sollen. Von https://webkit.org/blog/6784/new-video-policies-for-ios/ :

Auf dem iPhone können Elemente jetzt inline abgespielt werden und wechseln nicht automatisch in den Vollbildmodus, wenn die Wiedergabe beginnt. Elemente ohne Playline-Attribute benötigen weiterhin den Vollbildmodus für die Wiedergabe auf dem iPhone. Wenn Sie den Vollbildmodus mit einer Pinch-Geste verlassen, werden Elemente ohne Inline-Wiedergabe weiterhin inline abgespielt.

Mingala
quelle
2

Versuche dies:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

So mache ich es normalerweise. Schleife, Steuerelemente und Autoplay erfordern keinen Wert, sondern boolesche Attribute.

Jared.DAGI
quelle
2

Dies liegt daran, dass Chrome jetzt die automatische Wiedergabe in HTML5-Videos verhindert. Daher ist die automatische Wiedergabe standardmäßig nicht zulässig. Daher können wir diese Einstellungen mithilfe der Chrome-Flag-Einstellungen ändern. Dies ist im Normalfall nicht möglich, daher habe ich eine andere Lösung gefunden. das funktioniert perfekt ... (add pretoad = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  
Rijosh K.
quelle
2

Verbrachte zwei Stunden damit, alle oben genannten Lösungen auszuprobieren.

Das hat endlich bei mir funktioniert:

var vid = document.getElementById("myVideo");
vid.muted = true;
dpigera
quelle
1

Auf Safari Iphone wenn buttrig ist niedrig und iphone ist auf Low - Power - Modus es automatisch wieder gewinnt `t, auch wenn Sie die folgenden Attribute haben: automatischen Wiedergabe, Loop, stumm geschaltet, playsinline Satz auf Ihrem Video HTML - Tag.

Ich habe festgestellt, dass das Arbeiten darin besteht, ein Benutzergestenereignis zu haben, um die Videowiedergabe auszulösen:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

Weitere Informationen zu Benutzergesten und Video-Richtlinien für iOS finden Sie auf der Webkit-Website:

https://webkit.org/blog/6784/new-video-policies-for-ios/

Talsibony
quelle
0

Ich hatte einen Fall, in dem es etwas mit der Reihenfolge der verschiedenen Dateitypen zu tun hatte. Versuchen Sie es zu ändern und sehen Sie, ob das hilft.

MoritzGiessmann
quelle
0

Ich begann mit dem Abspielen aller sichtbaren Videos, aber alte Telefone zeigten keine gute Leistung. Im Moment spiele ich das Video ab, das der Mitte des Fensters am nächsten liegt, und pausiere den Rest. Vanilla JS. Sie können auswählen, welchen Algorithmus Sie bevorzugen.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}
ubershmekel
quelle
0

Ich habe das gleiche Problem gelöst mit,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Sie müssen die Videos starten, nachdem die Seite angezeigt wurde.

Ceci Semble Absurde.
quelle
0

Versuchen Sie tauschen in autoPlayfürautoplay .

Es scheint manchmal zwischen Groß- und Kleinschreibung zu unterscheiden. Sehr bizarr, weil es wie autoplaybei mir funktioniert hat, aber nur, wenn ich es mit einbezogcontrols

Mikaal Naik
quelle