Autoodtwarzanie wideo HTML5 na iPhonie

Mam jakiś dziwny problem. Próbuję stworzyć witrynę internetową z zapętlonym wideo w tle. Kod wygląda następująco:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

Rozwiń fragment

Działa to doskonale w większości przeglądarek (IE boryka się z tym dopasowaniem do obiektu, ale nie mam nic przeciwko), ale na iPhonie wideo nie odtwarza się automatycznie, ale na iPadzie tak. Przeczytałem już Nowe zasady dla iOS i myślę, że spełniam wymagania (w przeciwnym razie iPad nie będzie automatycznie odtwarzał). Zrobiłem kilka innych testów:

Usunięcie nakładających się elementów div tego nie naprawi
Usunięcie indeksu z nie naprawi tego
Wifi czy komórkowe nie mają znaczenia
Rozmiar plików wideo też nie ma znaczenia

Czy robię to źle, czy też iPhone po prostu nie odtwarza automatycznie filmów i zawsze wymaga interakcji? Zależy mi tylko na iOS 10, wiem, że wymagania były inne na iOS 9

— SeBa
źródło

Możesz znaleźć pomoc tutaj: stackoverflow.com/questions/41360490/ ... Osobiście nie otrzymałem jeszcze żadnego filmu do autoodtwarzania na iPhonie, nawet po zastosowaniu się do wszystkich tych wskazówek i zasad dotyczących Apple.

— Mark

Zajęło mi godziny, zanim to rozgryzłem. Aby oszczędzić wszystkim innym godzin, podsumowałem swoje odkrycia na blogu. Mam nadzieję, że to pomoże. medium.com/@BoltAssaults/…

— BoltCoder

Odpowiedzi:

214

Czy playsinlineatrybut pomaga?

Oto co mam:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

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

— Pete Florence
źródło

Alleluja! Dziękuję za to, bezskutecznie wypróbowałem kilkanaście innych rozwiązań.

— tolmark

playsinlinezadziałało dla mnie w połączeniu z mutedpamiętaniem o dziwactwie trybu niskiego zużycia energii na iPhonie

— Ken

To jest odpowiedź.

— JCraine,

playsinlineUratowany dzień !!!! Dzięki stary. Przy okazji, nowe zasady dotyczące przeglądarek wymagają, aby jeśli chcesz automatycznie uruchomić wideo, uruchom je wyciszone lub nie będziesz w stanie tego zrobić. +1 do @ken Przykład dla chrome: [ developers.google.com/web/updates/2017/09/…

— Nuno Prata

Jeśli używasz React pamiętać, że atrybut playsinlinemusi być napisana w CamelCase: playsInline. W przeciwnym razie to nie zadziała.

— Quentin D

iOS 10+ pozwala na automatyczne odtwarzanie wideo w tekście. ale musisz wyłączyć „Tryb niskiego zużycia energii” na swoim iPhonie.

— Dilip Godhani
źródło

świetna wskazówka, ale mam pytanie dotyczące tego, które przesłałem: stackoverflow.com/questions/50400902/ ...

— Mathieu

Spędziłem mniej więcej godzinę, próbując zrozumieć, dlaczego moje filmy nie odtwarzają się automatycznie. Dziękuję Ci za to!

— lior

Dziękuję Ci za to!

— Nikita Rogatnev

Warto wspomnieć, że nie możemy kontrolować urządzenia użytkownika i wyłączać trybu niskiego zużycia energii. Jedyne, co możemy zrobić, to poprosić użytkownika o „Wyłącz tryb niskiego zużycia energii”, aby mieć lepsze wrażenia

— Muhammad Osama

Mnie też się przydarzyło i doprowadzało mnie do szału, dopóki nie znalazłem twojego stanowiska. Patrzyłem już na specyfikacje Safari 11 i 11.1, jeśli może całkowicie wyłączyły autoodtwarzanie, ale był to tylko tryb niskiego zużycia energii ... życie programistów może być trudne. :-)

— haeki

Oto mały hack, który pozwala przezwyciężyć wszystkie problemy związane z autoodtwarzaniem wideo w witrynie:

Sprawdź, czy wideo jest odtwarzane, czy nie.
Włącz odtwarzanie wideo w przypadku zdarzenia, takiego jak kliknięcie ciała lub dotknięcie.

Uwaga: niektóre przeglądarki nie zezwalają na automatyczne odtwarzanie filmów, chyba że użytkownik wejdzie w interakcję z urządzeniem.

Tak więc skrypty sprawdzające, czy wideo jest odtwarzane, to:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Następnie możesz po prostu automatycznie odtworzyć wideo, dołączając słuchaczy wydarzeń do treści:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Uwaga: autoplayatrybut jest bardzo podstawowy, który należy dodać do tagu wideo już innego niż te skrypty.

Możesz zobaczyć działający przykład z kodem tutaj pod tym linkiem:

Jak automatycznie odtwarzać wideo, gdy urządzenie jest w trybie niskiego zużycia energii / trybie oszczędzania danych / problem z przeglądarką Safari

— Shakti
źródło