Autoodtwarzanie wideo HTML5 na iPhonie

88

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

ios html video webkit autoplay 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
1
Alleluja! Dziękuję za to, bezskutecznie wypróbowałem kilkanaście innych rozwiązań.
tolmark
23
playsinlinezadziałało dla mnie w połączeniu z mutedpamiętaniem o dziwactwie trybu niskiego zużycia energii na iPhonie
Ken
1
To jest odpowiedź.
JCraine,
1
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
18
Jeśli używasz React pamiętać, że atrybut playsinlinemusi być napisana w CamelCase: playsInline. W przeciwnym razie to nie zadziała.
Quentin D
62

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
2
świetna wskazówka, ale mam pytanie dotyczące tego, które przesłałem: stackoverflow.com/questions/50400902/ ...
Mathieu
7
Spędziłem mniej więcej godzinę, próbując zrozumieć, dlaczego moje filmy nie odtwarzają się automatycznie. Dziękuję Ci za to!
lior
2
Dziękuję Ci za to!
Nikita Rogatnev
4
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
1
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
7

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

  1. Sprawdź, czy wideo jest odtwarzane, czy nie.
  2. 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