wake-up-neo.com

Die automatische Wiedergabe von Videos funktioniert in Safari und Chrome-Desktopbrowser 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>

die Wiedergabe wird automatisch gestartet, sobald die Seite in FireFox geladen ist. In Webkit-basierten Browsern ist jedoch keine automatische Wiedergabe möglich. 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.

66
Adam Bubela

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 hübsch aber irgendwie klappt.

UPDATE In letzter Zeit können viele Browser nur Videos automatisch abspielen, wenn der Ton ausgeschaltet ist. Daher müssen Sie auch das muted-Attribut zum Video-Tag hinzufügen 

<video autoplay muted>
...
</video>
98
Adam Bubela

Nach der Verwendung der jQuery play()- oder DOM-Maniupulation, wie in den anderen Antworten vorgeschlagen, funktionierte es in Chrome für Android (Version 56.0) immer noch nicht (Video wurde nicht automatisch abgespielt).

Gemäß diesem post in developments.google.com wird die Autoplay-Option von Chrome 53 vom Browser berücksichtigt, falls das Video stummgeschaltet ist.

Durch die Verwendung von autoplay muted-Attributen in einem Video-Tag kann das Video ab Chrome in Chrome-Browsern ab Version 53 automatisch wiedergegeben werden. 

Auszug aus dem obigen Link:

Die automatische Wiedergabe von Videos wird von Chrome für Android ab Version 53 unterstützt. Die Wiedergabe wird automatisch für ein Videoelement gestartet, sobald es angezeigt wird, wenn sowohl autoplay als auch muted eingestellt sind. [...]

<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, egal ob stummgeschaltet oder nicht, wird auf Android bereits von Firefox und UC Browser unterstützt: Sie blockieren keine Art von Autoplay.
74
Ram

Es kommt vor, dass Safari und Chrome on Desktop die DOM-Manipulation um das Video-Tag nicht mögen. Sie werden die Abspielreihenfolge nicht auslösen, wenn das Autoplay-Attribut auf even gesetzt ist, wenn das Ereignis canplaythrough ausgelöst wurde, wenn sich das DOM um das Video-Tag nach dem ersten Laden der Seite geändert hat. Im Grunde hatte ich das gleiche Problem, bis ich eine .wrap () jQuery um den Video-Tag löschte und danach wie erwartet automatisch abspielte.

31
Arnaud Leyder

Für mich bestand das Problem darin, dass das muted-Attribut innerhalb des video-Tags hinzugefügt werden musste. I.e .: 

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`
17
GarryW

Google hat gerade seine Richtlinien für Videos zur automatischen Wiedergabe geändert. Es muss muted sein. 

Sie können hier überprüfen.

also einfach stummschalten 

<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>
15
mooga

Ich habe gerade das gleiche Problem mit meinem Video bekommen

<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" gesetzt habe, wird das Video normal gestartet

11
Thomas Lohner

Das Hinzufügen des unten stehenden Codes unten auf der Seite hat für mich funktioniert. Ich weiß nicht, warum es funktioniert :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);
8
sanath_p

Dies liegt daran, dass Chrome nun die automatische Wiedergabe in HTML5-Videos verhindert, sodass sie standardmäßig keine automatische Wiedergabe zulässt. So können wir diese Einstellungen mithilfe von Chrome-Flag-Einstellungen ändern. Dies ist im Normalfall nicht möglich, also habe ich eine andere Lösung gefunden. das funktioniert perfekt ... (add preload = "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();  
2
Rijosh K

Keine der anderen Antworten funktionierte für mich. Meine Workaround war, einen Klick auf das Video selbst auszulösen. hacky (wegen des benötigten Timeouts), aber es funktioniert gut:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);
2
Stijn Geukens

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

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

0
Ant0ha

Versuche dies:

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

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.

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, da sie boolesche Attribute sind. 

0
Jared.DAGI

Wir haben kürzlich ein ähnliches Problem mit einem eingebetteten Video angesprochen und festgestellt, dass die Attribute für automatisches Abspielen und stummgeschaltet für unsere Implementierung nicht ausreichend waren. 

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

Dieses Update 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 Play-Inline-Attribute erfordern weiterhin den Vollbildmodus für die Wiedergabe auf dem iPhone. Wenn Sie den Vollbildmodus mit einer Prise-Geste beenden, werden Elemente ohne Play-Inline weiterhin inline abgespielt.

0
mingala

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.

0
MoritzGiessmann

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

Dies ist, was schließlich für mich gearbeitet hat:

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

Ich habe mit der Wiedergabe aller sichtbaren Videos begonnen, aber alte Telefone zeigten keine gute Leistung. Im Moment spiele ich das eine Video ab, das der Mitte des Fensters am nächsten liegt, und pausiere den Rest. Vanille 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();
}
0
ubershmekel