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

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.

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>

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.

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.

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>

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

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>

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

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

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

Spróbuj tego:

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

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

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

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.

Zaktualizowaliśmy zasady Google dotyczące automatycznego odtwarzania. Autoodtwarzanie działa tylko w trybie wyciszenia. Sprawdź link https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

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.

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

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;

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/

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.

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

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.

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