Automatyczne odtwarzanie wideo nie działa w przeglądarce Safari i Chrome na komputerze

134

Spędziłem sporo czasu, próbując dowiedzieć się, dlaczego osadzono wideo w ten sposób:

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

rozpoczyna odtwarzanie automatycznie po załadowaniu strony do FireFox, ale nie może odtwarzać automatycznie w przeglądarkach opartych na Webkit. Zdarzyło się to tylko na niektórych przypadkowych stronach. Jak dotąd nie udało mi się znaleźć przyczyny. Podejrzewam jakieś niezamknięte tagi lub rozbudowany JS stworzony przez redaktorów CMS.

Adam Bubela
źródło
czy to czasami działa? lub w ogóle nie działa ... oto przykład w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay, który sprawdzam w chrome i działa.
tanaydin
Na niektórych stronach w ogóle nie działa
Adam Bubela
W obliczu tego samego problemu działał dobrze tydzień temu i bez żadnych zmian po prostu przestał działać. Może to aktualizacja przeglądarki, bardzo irytująca konieczność ręcznego odtwarzania wszystkich tagów wideo za pomocą javascript
bingeScripter
Nie działa dla mnie w Chrome.
Bob the Builder

Odpowiedzi:

260

Najlepszą poprawką, jaką mogłem uzyskać, było dodanie tego kodu tuż po </video>

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

... nie ładne, ale jakoś działa.

AKTUALIZACJA Ostatnio wiele przeglądarek może automatycznie odtwarzać filmy tylko z wyłączonym dźwiękiem, więc musisz też dodać mutedatrybut do tagu wideo

<video autoplay muted>
...
</video>
Adam Bubela
źródło
1
Lub możesz kodować za pomocą jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/ ...
Penguin
8
Lub tak:$("video[autoplay]").each(function(){ this.play(); });
Martin
2
nadal problem, jeśli nie jest wyciszony developers.google.com/web/updates/2017/09/…
dovid
5
to już nie zadziała bez interakcji z użytkownikiem AFAIK
webkit
zobacz ten stackoverflow.com/questions/43570460/…
Leandro H Agostinho
93

Po użyciu play()manipulacji jQuery lub DOM, jak sugerowały inne odpowiedzi, nie działał (film nie odtwarzał się automatycznie) w przeglądarce Chrome na Androida (wersja 56.0).

Zgodnie z tym postem w developers.google.com , w Chrome 53, opcja autoodtwarzania jest respektowana przez przeglądarkę, jeśli wideo jest wyciszone .

Dlatego użycie autoplay mutedatrybutów w tagu wideo umożliwia automatyczne odtwarzanie wideo w przeglądarkach Chrome od wersji 53.

Wyciąg z powyższego linku:

Wyciszone autoodtwarzanie wideo jest obsługiwane przez Chrome na Androida od wersji 53. Odtwarzanie rozpocznie się automatycznie dla elementu wideo, gdy pojawi się on w widoku, jeśli oba elementy autoplayimuted są ustawione [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
  • Wyciszone autoodtwarzanie jest obsługiwane przez Safari na iOS 10 i nowszych.
  • Autoodtwarzanie, wyciszone lub nie, jest już obsługiwane na Androidzie przez przeglądarkę Firefox i UC: nie blokują one żadnego rodzaju autoodtwarzania.
Baran
źródło
3
Miałem ten problem w Safari 11, gdzie wideo w tle (bez dźwięku) nie odtwarzało się automatycznie. Dodanie mutedi autoplayzałatwiło sprawę. Dzięki!
dmbaughman
1
Dlaczego więc autoodtwarzanie z włączonym dźwiękiem działa na youtube? Działa w ten sposób od momentu powstania strony.
Xavier
32

Zdarza się, że Safari i Chrome na komputerze nie lubią manipulacji DOM wokół tagu wideo. Nie uruchomią kolejności odtwarzania, gdy atrybut autoplay jest ustawiony, nawet jeśli zdarzenie canplaythrough zostało uruchomione, gdy DOM wokół tagu wideo zmienił się po początkowym załadowaniu strony. Zasadniczo miałem ten sam problem, dopóki nie usunąłem .wrap () jQuery wokół tagu wideo, a następnie automatycznie odtwarzał się zgodnie z oczekiwaniami.

Arnaud Leyder
źródło
2
Dobre wezwanie, że nie działa z .wrap (). Jednak, o ile wiem, kod potrzebuje do działania .get (0): $ ("# vid"). Get (0) .play ();
mattsoave
3
@mattsoave .get(0)lub po prostu$('#vid')[0].play()
pmrotule
Październik 2017 r., Wideo nie odtwarza się automatycznie pomimo atrybutu w tagu, jest nadal problemem w Safari. Użycie [0] .play () zgodnie z sugestią mattsoave / pmrotule rozwiązało problem.
Don Cullen
25

Google właśnie zmieniło zasady dotyczące autoodtwarzania filmów, to musi być muted

Możesz sprawdzić tutaj

więc po prostu dodaj wyciszony

<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
źródło
Komentarz Johna Palletta na temat nowej polityki . Jest menedżerem produktu Google Chrome i Media Muter .
Doomjunky
24

Dla mnie problem polegał na tym, że mutedatrybut musiał zostać dodany w videotagu. To znaczy:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`
GarryW
źródło
Działa z najnowszą
wersją
Na Crome, jeśli dodam wyciszony dźwięk wyłączania. Nie chcę tego
lisarko8077
17

Chrome nie pozwala na automatyczne odtwarzanie wideo z włączonym dźwiękiem, więc pamiętaj, aby dodać mutedatrybut do videotagu w ten sposób

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>
Abdul Basit
źródło
3
To nie dodaje niczego nowego. Odpowiedź zaakceptowany już wspomina o tym. Również druga odpowiedź jest bardziej szczegółowa.
Samuel Philipp
12

Właśnie pojawił się ten sam problem z moim wideo

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

Po wyszukiwaniu znalazłem rozwiązanie:

Jeśli ustawię atrybuty „preload” na „true”, wideo rozpocznie się normalnie

Thomas Lohner
źródło
Atrybut preload jest ignorowany przez przeglądarkę, jeśli jest obecna autoodtwarzanie.
Sedat Başar
9

Dodanie poniższego kodu na dole strony zadziałało. Nie wiem, dlaczego to działa :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);
sanath_p
źródło
2
Powodem jest to, że czekasz na załadowanie wideo do bufora, a następnie je odtwarzasz.
Joseph Briggs,
9

Spróbuj tego:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>
Ishan Lakshitha
źródło
5

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

Tylko to rozwiązanie pomogło mi, <video autoplay muted ...>...</video>nie zadziałało ...

Ant0ha
źródło
3

Żadna z pozostałych odpowiedzi nie działała dla mnie. Moje obejście polegało na wywołaniu kliknięcia samego wideo; hacky (z powodu wymaganego limitu czasu), ale działa dobrze:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);
Stijn Geukens
źródło
Nic nie działało w Chrome również dla mnie. W przypadku powyższej poprawki .play () fix (hack) otrzymałem komunikat „Uncaught (w obietnicy) DOMException: Żądanie play () zostało przerwane przez wywołanie pause ()”. w konsoli. Na stronie było kilka innych funkcji jQuery, więc pomyślałem, że licznik czasu da Chrome wystarczająco dużo czasu na rozwiązanie problemu. Zadziałało.
Ustawiłem
3

Niedawno rozwiązaliśmy podobny problem z osadzonym filmem i stwierdziliśmy, że atrybuty autoodtwarzania i wyciszenia nie były wystarczające do naszej implementacji.

Dodaliśmy trzeci atrybut „playsinline” do kodu i rozwiązaliśmy problem z użytkownikami iOS.

Ta poprawka dotyczy tylko filmów, które mają być odtwarzane w tekście. Od https://webkit.org/blog/6784/new-video-policies-for-ios/ :

Na iPhonie elementy będą teraz mogły być odtwarzane w tekście i nie będą automatycznie przechodzić do trybu pełnoekranowego po rozpoczęciu odtwarzania. elementy bez atrybutów playsinline będą nadal wymagały trybu pełnoekranowego do odtwarzania na iPhonie. Po wyjściu z trybu pełnoekranowego gestem szczypania elementy bez odtwarzania w linii będą nadal odtwarzane w linii.

mingala
źródło
2

Spróbuj tego:

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

Tak zwykle robię. loop, kontrolki i autoodtwarzanie nie wymagają wartości, które są atrybutami logicznymi.

Jared.DAGI
źródło
2

Dzieje się tak, ponieważ teraz Chrome uniemożliwia automatyczne odtwarzanie w wideo HTML5, więc domyślnie nie zezwala na automatyczne odtwarzanie. więc możemy zmienić te ustawienia za pomocą ustawień flagi chrome. nie jest to możliwe w normalnym przypadku, więc muszę znaleźć inne rozwiązanie. to działa idealnie ... (dodaj 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();  
Rijosh K
źródło
2

Spędziłem dwie godziny próbując wszystkich wyżej wymienionych rozwiązań.

Oto, co w końcu zadziałało:

var vid = document.getElementById("myVideo");
vid.muted = true;
dpigera
źródło
1

Na iPhonie safari, gdy poziom naładowania jest niski, a iPhone jest w trybie niskiego zużycia energii , nie będzie odtwarzany automatycznie, nawet jeśli masz następujące atrybuty: autoodtwarzanie, pętla, wyciszenie, odtwarzanie w linii w tagu HTML wideo.

Spacer po tym, jak odkryłem, działa to, aby zdarzenie gestu użytkownika wyzwalało odtwarzanie wideo:

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

Możesz przeczytać więcej o gestach użytkownika i zasadach dotyczących wideo na iOS w witrynie Webkit:

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

talsibony
źródło
0

Miałem przypadek, w którym miało to coś wspólnego z kolejnością różnych typów plików. Spróbuj to zmienić i zobacz, czy to pomaga.

MoritzGiessmann
źródło
0

Zacząłem od odtwarzania wszystkich widocznych filmów, ale stare telefony nie działały dobrze. Więc teraz odtwarzam jedno wideo, które jest najbliżej środka okna, a resztę wstrzymuję. Vanilla JS. Możesz wybrać preferowany algorytm.

//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
źródło
0

Rozwiązałem ten sam problem z

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

Musisz uruchomić filmy po wyświetleniu strony.

Ceci Semble Absurde.
źródło
0

Spróbuj zamienić autoPlaynaautoplay .

Czasami wydaje się, że wielkość liter ma znaczenie. Bardzo dziwne, bo jak autoplaydla mnie zadziałało , ale tylko pod warunkiem, że to zrobięcontrols

Mikaal Naik
źródło