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

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.

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>

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.

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.

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>

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>`

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>

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

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);

Versuche dies:

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

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

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

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);

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.

Google hat die Autoplay-Richtlinie aktualisiert. Autoplay funktioniert nur im Stummschaltungsmodus. Überprüfen Sie den Link https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

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.

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();  

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

Das hat endlich bei mir funktioniert:

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

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/

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.

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();
}

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.

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