Czy możesz automatycznie odtwarzać filmy HTML5 na iPadzie?

123

<video>Tagów autoplay="autoplay"atrybut działa prawidłowo w Safari.

Podczas testowania na iPadzie wideo należy aktywować ręcznie.

Myślałem, że to problem z ładowaniem, więc uruchomiłem pętlę sprawdzającą stan nośnika:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

Stan pozostaje 0na iPadzie. Na moim pulpicie safari, to przechodzi 0, 1a na końcu 4. Na iPadzie osiąga tylko 4wtedy, gdy ręcznie kliknę strzałkę „odtwórz”.

Co więcej, dzwonienie $("#periscopevideo").get(0).play()za pomocą kliknięcia przez onClickrównież działa.

Czy Apple ma jakieś ograniczenia dotyczące autoodtwarzania? (Nawiasem mówiąc, używam iOS 5+).

— Jem
źródło

Powiązane / duplikaty: stackoverflow.com/questions/2841966/… , stackoverflow.com/questions/4259928/ ...

— apsillers

Może powinniśmy przyjrzeć się wykrywaniu przeglądarki i temu, czy należy wywoływać funkcję playVideo (): stackoverflow.com/questions/26895492/…

— Redtopia

Ta praca dla mnie github.com/Stanko/html-canvas-video-player

— dimitar

Przydatny post na blogu na ten temat: webkit.org/blog/6784/new-video-policies-for-ios

— Matthias M

opera mini w ios domyślnie obsługuje autoodtwarzanie, podczas gdy chrome, firefox i safari nie obsługują i nie oferują opcji włączania.

— anonimowy

156

Aktualizacja iOS 10

Zakaz autoodtwarzania został zniesiony od iOS 10 - ale z pewnymi ograniczeniami (np. A może być odtwarzane automatycznie, jeśli nie ma ścieżki dźwiękowej).

Aby zobaczyć pełną listę tych ograniczeń, zobacz oficjalne dokumenty: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 i starsze

Od wersji iOS 6.1 nie można już automatycznie odtwarzać filmów na iPadzie.

Moje przypuszczenie, dlaczego wyłączyli funkcję automatycznego odtwarzania?

Cóż, ponieważ wielu właścicieli urządzeń ma ograniczenia wykorzystania danych / przepustowości na swoich urządzeniach, myślę, że Apple uważał, że użytkownik powinien sam decydować, kiedy inicjuje użycie przepustowości.

Po krótkich poszukiwaniach znalazłem następujący fragment w dokumentacji Apple dotyczący automatycznego odtwarzania na urządzeniach z systemem iOS, aby potwierdzić moje przypuszczenia:

„Firma Apple podjęła decyzję o wyłączeniu automatycznego odtwarzania wideo na urządzeniach z systemem iOS, zarówno poprzez implementację skryptów, jak i atrybutów.

W Safari na iOS (dla wszystkich urządzeń, w tym iPada), gdzie użytkownik może być w sieci komórkowej i pobierać opłaty za jednostkę danych, wstępne ładowanie i automatyczne odtwarzanie są wyłączone. Żadne dane nie są ładowane, dopóki użytkownik ich nie zainicjuje. "- dokumentacja Apple.

Oto osobne ostrzeżenie zamieszczone na stronie odniesienia Safari HTML5 o tym, dlaczego osadzonych multimediów nie można odtwarzać w Safari na iOS:

Ostrzeżenie : aby zapobiec niechcianemu pobieraniu przez sieci komórkowe na koszt użytkownika, osadzone multimedia nie mogą być odtwarzane automatycznie w Safari na iOS - użytkownik zawsze inicjuje odtwarzanie. Kontroler jest automatycznie dostarczany na iPhone'a lub iPoda touch po zainicjowaniu odtwarzania, ale w przypadku iPada musisz albo ustawić atrybut controls, albo dostarczyć kontroler za pomocą JavaScript.

Oznacza to (w odniesieniu do kodu), że JavaScript play()i load()metody są nieaktywne do momentu zainicjowania przez użytkownika odtwarzania, chyba że metoda play()lub load()zostanie wywołana przez działanie użytkownika (np. Zdarzenie kliknięcia).

Zasadniczo przycisk odtwarzania inicjowany przez użytkownika działa, ale onLoad="play()"zdarzenie nie.

Na przykład odtworzyłoby to film:

<input type="button" value="Play" onclick="document.myMovie.play()">

Podczas gdy poniższe nic nie zrobią na iOS:

<body onload="document.myMovie.play()">

— dsgriffin
źródło

1

Hmmm 3 miesiące tworzenia budzika online dla iPhone'a Safari poszło na marne! (Sleep.fm) wymyśliliśmy sposób na utrzymywanie telefonu w stanie czuwania, gdy aplikacja jest otwarta, ale teraz z iOS 6.1 dźwięk alarmu nie będzie odtwarzany. Działało dobrze w iOS 6.0. Czy jest w pobliżu praca?

— chaser7016

1

och, czekaj, mamy nasz mobilny budzik sieciowy (sleep.fm) dla iPhone'a Safari i znów działa, więc są obejścia związane z brakiem obsługi autoodtwarzania HTML5.

— chaser7016

1

@ Jonah1289 Według twojego posta na blogu Sleep.fm, Brian Cavalier opublikował na Twitterze link do github z następującym tytułem Autoodtwarzanie dźwięku na iPadzie lub iPhonie przy użyciu webkitaudiocontext zamiast tagu audio. Może to być dobre miejsce na rozpoczęcie.

— Francisco

1

Więcej szczegółów - jakie konkretne obejścia istnieją w przypadku braku obsługi autoodtwarzania?

— Umopepisdn

11

Powinni zezwolić na autoodtwarzanie w sieci Wi-Fi i albo ręcznie odtwarzać, albo podpowiedzieć użytkownikowi, że film chce się automatycznie odtwarzać w sieci komórkowej.

— Ric

16

Chcę zacząć od stwierdzenia, że zdaję sobie sprawę, że to pytanie jest stare i ma już zaakceptowaną odpowiedź; ale jako nieszczęsny internauta, który użył tego pytania jako środka do zakończenia tylko po to, aby wkrótce potem udowodnić, że się mylę (ale nie zanim trochę zdenerwuję mojego klienta), chcę dodać moje przemyślenia i sugestie.

Chociaż @DSG i @Giona mają rację i nie ma nic złego w ich odpowiedziach, istnieje kreatywny mechanizm, który możesz wykorzystać, aby „ominąć”, że tak powiem, to ograniczenie. Nie oznacza to, że akceptuję obejście tej funkcji, wręcz przeciwnie, ale tylko niektóre mechanizmy, dzięki którym użytkownik nadal „czuje się” tak, jakby plik wideo lub audio „odtwarzał się automatycznie”.

Szybkim obejściem jest ukrycie tagu wideo gdzieś na stronie mobilnej, ponieważ zbudowałem responsywną witrynę, robię to tylko dla mniejszych ekranów. Tag wideo (przykłady HTML i jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Mając to ukryte na stronie, gdy użytkownik „klika”, aby obejrzeć film (nadal interakcja użytkownika, nie ma sposobu, aby obejść to wymaganie) zamiast przejść do drugiej strony odtwarzania, wczytuję ukryty film. Działa to głównie dlatego, że tag media nie jest tak naprawdę używany, ale zamiast tego jest promowany do instancji Quicktime, więc posiadanie widocznego elementu wideo nie jest wcale konieczne. W programie obsługi dla „kliknięcia” (lub „dotknięcia” na telefonie komórkowym).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

I altówkę. Jeśli chodzi o UX, użytkownik klika wideo, aby odtworzyć, a Quicktime otwiera, odtwarzając wybrany przez siebie film. Pozostaje to w ramach ograniczenia, że filmy można odtwarzać tylko w wyniku działania użytkownika, więc nie narzucam danych nikomu, kto nie decyduje się na oglądanie wideo za pomocą tej usługi. Odkryłem to, próbując dowiedzieć się, jak dokładnie YouTube wyciągnął to z ich telefonu komórkowego, który jest w zasadzie naprawdę ładnym budowaniem strony JavaScript i fantazyjnym elementem ukrywającym się, jak w przypadku tagu wideo.

tl; dr Oto swego rodzaju „obejście” polegające na próbie utworzenia funkcji „autoodtwarzania” UX na urządzeniach z systemem iOS bez przekraczania ograniczeń Apple i pozostawiania użytkownikom decyzji, czy chcą oglądać wideo (lub dźwięk najbardziej lubi, chociaż ja nie zostały przetestowane) bez załadowania jednego bez ich zgody.

Również dla osoby, która skomentowała, że pochodzi z sleep.fm, niestety nie byłoby to rozwiązaniem problemów, które polegają na odtwarzaniu dźwięku w oparciu o czas.

Mam nadzieję, że ktoś uzna te informacje za przydatne, zaoszczędziłoby mi to tydzień dostarczania złych wiadomości do klienta, który był nieugięty, że ma tę funkcję i byłem zadowolony, że w końcu znalazłem sposób na jej dostarczenie.

EDYTOWAĆ

Dalsze ustalenia wskazują, że powyższe obejście dotyczy tylko urządzeń iPhone / iPod. IPad odtwarza wideo w Safari, zanim zostanie wyświetlony w trybie pełnego ekranu, więc będziesz potrzebować mechanizmu zmiany rozmiaru wideo po kliknięciu przed odtworzeniem, w przeciwnym razie skończysz z dźwiękiem i bez wideo.

— Brandon Buck
źródło

2

Byłoby lepiej użyć $dummyVideo.get(0)zamiast nawiasów, więc jQuery może z wdziękiem zawieść, jeśli twój wybór jest pusty.

— Micros,

12

Po prostu ustaw

webView.mediaPlaybackRequiresUserAction = NO;

Autoodtwarzanie działa dla mnie na iOS.

— Er Li
źródło

29

To nie działa w przypadku witryny internetowej, działa to tylko w przypadku witryn, w których zostały opakowane aplikacją natywną.

— Brandon Buck

5

Chodzi mi o to, że ze strony internetowej (jak zadaje pytanie) jest to coś całkowicie niedostępnego - tak, Javascript w przeglądarce nie może tego zrobić. Działa to tylko wtedy, gdy uruchamiasz witrynę wewnątrz WebView z aplikacji, nad którą masz kontrolę, więc tak naprawdę nie zapewnia rozwiązania tego pytania.

— Brandon Buck,

6

@izuriel, żeby być uczciwym, oznaczył pytanie tagami „objective-c” i „cocoa-touch”, więc założenie, że korzysta z

— widoku

3

Tagi @Kloar są zwykle dodawane jako sposób na zwrócenie większej uwagi lub ogólne niezrozumienie problemu, który próbują rozwiązać. Osoba zadająca pytanie mogła pomyśleć, że wymienienie celu-c jest tym samym, co powiedzenie „iOS” (i podobnie w przypadku dotyku kakaowego). Jednak tag „uiwebview” nie jest wymieniony, więc wykluczyłbym go jako realną opcję. Pytanie wspomina o korzystaniu z Safari na komputerze stacjonarnym i iPadzie (nic o aplikacji) i używa kodów demonstracyjnych Javascript do debugowania sytuacji. Podsumowując, powiedziałbym, że to bardziej bezpieczny zakład, że to pytanie naprawdę dotyczyło rozwiązań internetowych, a nie natywnych.

— Brandon Buck

Na Androidzie: developer.android.com/reference/android/webkit/ ...

— cottonBallPaws

11

Od wersji iOS 10 filmy mogą teraz odtwarzać się automatycznie, ale tylko z nich są wyciszone lub nie mają ścieżki dźwiękowej. Yay!

W skrócie:

<video autoplay> elementy będą teraz honorować atrybut autoodtwarzania w przypadku elementów, które spełniają następujące warunki:
- <video> elementy będą mogły odtwarzać się automatycznie bez gestu użytkownika, jeśli ich nośnik źródłowy nie zawiera ścieżek dźwiękowych.
- <video muted> elementy będą również mogły odtwarzać się automatycznie bez gestu użytkownika.
- Jeśli <video>element uzyska ścieżkę dźwiękową lub zostanie wyciszony bez gestu użytkownika, odtwarzanie zostanie wstrzymane.
- <video autoplay> elementy zaczną się odtwarzać tylko wtedy, gdy są widoczne na ekranie, na przykład gdy są przewijane do widoku, widoczne przez CSS i wstawiane do DOM.
- <video autoplay> elementy zostaną zatrzymane, jeśli staną się niewidoczne, na przykład podczas przewijania z rzutni.

Więcej informacji tutaj: https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
źródło

4

atrybut autoplay działa tylko na PC, nie działa na urządzeniach mobilnych. Próbowałem wiele razy.

— huykon225

7

W tym odnośniku HTML5 do Safari możesz przeczytać

Aby zapobiec niechcianemu pobieraniu przez sieci komórkowe na koszt użytkownika, osadzone multimedia nie mogą być odtwarzane automatycznie w przeglądarce Safari na iOS - użytkownik zawsze inicjuje odtwarzanie. Kontroler jest automatycznie dostarczany na iPhone'a lub iPoda touch po rozpoczęciu odtwarzania, ale w przypadku iPada musisz albo ustawić atrybut controls, albo dostarczyć kontroler za pomocą JavaScript.

— Giona
źródło

38

„oprócz plików GIF, które mogą mieć wiele MB i wykorzystywać przepustowość bez wiedzy ludzi”

— Simon_Weaver

@Simon_Weaver x12 razy przez większość czasu, aby być precyzyjnym.

— Burak Tokak

2

Pozwól najpierw wyciszyć wideo, aby zapewnić automatyczne odtwarzanie w iOS, a następnie wyłącz wyciszenie, jeśli chcesz.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>

— Mohammad Ali Akbari
źródło