Tag wideo HTML5 nie działa w Safari, iPhonie i iPadzie

Próbuję stworzyć stronę internetową html5, na której jest mały filmik np. 13s, przekonwertowałem wersję flash tego wideo na format 3: .ogv używając fireFogg, .webm używając firefogg także i .mp4 używając aplikacji HandBrake skrypt html Użyłem na mojej stronie:

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

Wideo działa dobrze w Chrome i FireFox, ale nie działa w ogóle ani w Safari na komputerze, ani na iPhonie lub iPadzie, wynik jest po prostu pustą stroną, która pokazuje elementy sterujące tagu wideo, ale nic nie jest ładowane

Zauważ, że wersja Safari, którą mam, obsługuje wideo HTML5

Miałem ten sam problem z urządzeniami Apple, takimi jak iPhone i iPad, wyłączyłem tryb niskiego zużycia energii i zadziałało, a także powinieneś uwzględnić playsinlineatrybut w tagu wideo w następujący sposób:

<video class="video-background" autoplay loop muted playsinline>

Działało tylko wtedy, gdy w tym playsinline.

Inne możliwe rozwiązanie dla przyszłych wyszukiwarek: (Jeśli problem nie dotyczy typu MIME).

Z jakiegoś powodu filmy nie byłyby odtwarzane na iPadzie, chyba że ustawię flagę controls = „prawda”.

Przykład: to działało dla mnie na iPhonie, ale nie na iPadzie.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Teraz działa to zarówno na iPadzie, jak i na iPhonie:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Twój serwer WWW może nie obsługiwać żądań HTTP z zakresu bajtów. Tak jest w przypadku serwera internetowego, którego używam, w wyniku czego widżet wideo ładuje się i pojawia się przycisk odtwarzania, ale kliknięcie przycisku nie ma żadnego efektu. - Wideo działa w FF i Chrome, ale nie na iPhonie ani iPadzie.

Przeczytaj więcej na temat żądań zakresu bajtów tutaj na mobiforge.com , w Dodatku A: Przesyłanie strumieniowe dla Apple iPhone :

Po pierwsze, przeglądarka internetowa Safari żąda zawartości, a jeśli jest to plik audio lub wideo, otwiera odtwarzacz multimediów. Następnie odtwarzacz multimediów żąda pierwszych 2 bajtów zawartości, aby upewnić się, że serwer WWW obsługuje żądania z zakresu bajtów. Następnie, jeśli je obsługuje, odtwarzacz multimedialny iPhone'a żąda pozostałej zawartości według zakresów bajtów i odtwarza ją.

Możesz poszukać w Internecie hasła „zakres bajtów iphone mp4”.

Jeśli Twoje filmy są chronione przez system logowania oparty na sesji, Safari nie załaduje ich. Dzieje się tak, ponieważ Safari wysyła wstępne żądanie wideo, a następnie przekazuje to zadanie QuickTime, który wysyła kolejne żądanie. Ponieważ Safari przechowuje informacje o sesji, przejdzie uwierzytelnienie, ale QuickTime nie.

Możesz to zobaczyć, przeglądając dziennik dostępu do serwera ... najpierw żądanie z Safari, a następnie żądanie z QuickTime. Inne przeglądarki wysyłają tylko jedno żądanie z samej przeglądarki.

Jeśli to jest twój problem, być może będziesz musiał przerobić dostęp do wideo, aby użyć tymczasowych tokenów lub dostępu przez ograniczony czas z pierwotnego żądania. Zaktualizuję tę odpowiedź, jeśli znajdę bardziej bezpośrednie rozwiązanie.

Dla przyszłych wyszukiwań, jak również, miałem plik mp4, że zredukowanego z hamulca ręcznego korzystając handbrake-gtkz apt-getnp sudo apt-get install handbrake-gtk. W Ubuntu 14.04 handbrakerepozytorium nie obejmuje obsługi MP4 po wyjęciu z pudełka. Zostawiłem ustawienia domyślne, usunąłem ścieżkę audio i generuje plik * .M4V. Dla tych, którzy się zastanawiają, są to ten sam kontener, ale M4V jest używany głównie na iOS do otwierania w iTunes.

To działało we wszystkich przeglądarkach z wyjątkiem Safari:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Zmieniłem typ mime pomiędzy video/mp4i video/m4vbez efektu. Testowałem też dodanie controlatrybutu i znowu bez efektu.

To działało we wszystkich testowanych przeglądarkach, w tym Safari 7 na Mavericks i Safari 8 na Yosemite. Po prostu zmieniłem nazwę tego samego pliku m4v (właściwy plik, a nie tylko HTML) na mp4 i ponownie załadowałem do naszego CDN:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Myślę, że Safari w pełni spodziewa się faktycznie nazwanego MP4. Żadne inne kombinacje plików i typów MIME nie działały dla mnie. Myślę, że inne przeglądarki wybierają najpierw plik WEBM, zwłaszcza Chrome, chociaż jestem prawie pewien, że lista źródeł powinna wybrać pierwsze źródło, które jest technicznie obsługiwane.

Nie rozwiązało to jednak problemu z wideo na urządzeniach z systemem iOS (testowano iPada 3 „nowy iPad” i iPhone 6).

Po prostu dodaj mutedatrybut i wszystko będzie dobrze działać.

Źródło tej odpowiedzi jest tutaj: https://webkit.org/blog/6784/new-video-policies-for-ios/

Domyślnie WebKit będzie miał następujące zasady:

<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 zyska ścieżkę dźwiękową lub zostanie wyłączony bez gestu użytkownika, odtwarzanie zostanie wstrzymane.
• <video autoplay> elementy zaczną być odtwarzane 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 zatrzymają się, jeśli staną się niewidoczne, na przykład podczas przewijania poza rzutnię.

<video> elementy będą teraz honorować metodę play () dla elementów, które spełniają następujące warunki:

• <video> elementy będą mogły odtwarzać () bez gestu użytkownika, jeśli ich nośnik źródłowy nie zawiera ścieżek audio lub jeśli ich właściwość muted jest ustawiona na true.
• Jeśli <video>element zyska ścieżkę dźwiękową lub zostanie wyłączony bez gestu użytkownika, odtwarzanie zostanie wstrzymane.
• <video> elementy będą mogły być odtwarzane (), gdy nie będą widoczne na ekranie lub poza widocznym obszarem.
• video.play () zwróci Obietnicę, która zostanie odrzucona, jeśli którykolwiek z tych warunków nie zostanie spełniony.

Na iPhonie <video playsinline>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. <video>elementy bez atrybutów playsinline będą nadal wymagały trybu pełnoekranowego do odtwarzania na iPhonie. Wychodząc z <video>trybu pełnoekranowego gestem szczypania, elementy bez linii odtwarzania będą nadal odtwarzane w linii.

Odkryłem, że chociaż Safari obsługuje wideo HTML5, to aby to działało, należy zainstalować odtwarzacz Quicktime Player. W zbudowanej przeze mnie witrynie korzystającej z HTML5 Video użytkownik jest ostrzegany podczas korzystania z Safari, informując go, że musi mieć zainstalowany Quicktime, w przeciwnym razie będzie mógł zobaczyć tylko transkrypcje wideo. Mam nadzieję że to pomoże.

Widziałem dziwne problemy z niezaufanymi „programistycznymi” certyfikatami SSL, w przypadku których mobilna przeglądarka Safari z przyjemnością będzie obsługiwać Twoją stronę, ale odmówi przesłania wideo do „fałszywego” certyfikatu SSL, nawet jeśli ten certyfikat został zaakceptowany.

Aby przetestować, możesz wdrożyć wideo w innym miejscu - lub przełączyć się na http (dla całej strony) i powinno zostać odtworzone.

Dodanie „playinline” działa dla mnie na Iphone i Ipa, jeśli nie masz nic przeciwko wyciszeniu twojego wideo.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Jeśli nie chcesz, aby Twój film był wyciszony, ale nadal chcesz autoodtwarzania, może spróbuj usunąć wyciszony atrybut za pomocą js: Jak wyłączyć wyciszenie wideo HTML5 za pomocą wyciszonego rekwizytu

Od wersji iOS 6.1 nie można już automatycznie odtwarzać filmów na iPadzie. Zgodnie z dokumentacją Apple, funkcja autoodtwarzania nie działa w przeglądarce Safari na wszystkich urządzeniach z systemem iOS, w tym na iPadzie:

„Apple podjął 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. "

Możesz przeczytać więcej na ten temat w tej dokumentacji Apple

W przypadku .mp4 to działa (mobilne i stacjonarne safari):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

controls=”true”Wspomniano w powyższym poście nie daje żadnych sence dla mnie jak Apple mówi kontroli wystarczy użyć na własną rękę.

Odniesienie: „Aby użyć dźwięku lub wideo HTML5, zacznij od utworzenia elementu lub, określenia źródłowego adresu URL dla mediów i dołączenia atrybutu controls. <video src="http://example.com/path/mymovie.mp4" controls></video>”

Źródło : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

W moich kontaktach (mała dygresja) : Odkryłem, że przesyłanie wideo z iPhone'a powoduje wysłanie go na serwer w formacie .quicktime. Jak na ironię, jest to problem podczas próby odtwarzania wideo z serwera na safari. (mobilne i stacjonarne).

Więc jeśli (tak jak ja) masz problem z .quicktime (lub czymś innym niż .mp4) w safari , oto obejście zapewniane przez Apple. Uwaga, jeszcze tego nie przetestowałem i nie jestem z niego zadowolony na pierwszy rzut oka, podając tylko więcej informacji.

Odniesienie: „Powrót do wtyczki QuickTime Istnieje prosty sposób na powrót do wtyczki QuickTime, która działa w prawie wszystkich przeglądarkach - pobierz wstępnie utworzony plik JavaScript dostarczony przez firmę Apple, ac_quicktime.js, z HTML Video Example i umieść go na swojej stronie internetowej, wstawiając następujący wiersz kodu do nagłówka HTML: <script src="ac_quicktime.js" type="text/javascript"></script>”

Źródło: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Aktualizacja: w przypadku zmiany nazwy pliku .quicktime na .movwcześniejsze przesłanie na serwer (w typie pliku base64 „dane: wideo / mov;”) pomiń plik ac_quicktime.js. . . będzie wtedy działać w tagu wideo HTML; Hackerdy ​​Hack.

Używając tego kodu, wideo będzie odtwarzane we wszystkich przeglądarkach w Safari, a także na urządzeniach z systemem iOS ... Idź po to wszyscy (użyłem tego i działa dobrze)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

`

Miałem podobny problem, w którym filmy w <video>tagu były odtwarzane tylko w przeglądarce Chrome i Firefox, ale nie w Safari. Oto, co zrobiłem, aby to naprawić ...

Dziwna sztuczka, którą znalazłem, polegała na tym, że miałem dwa różne odniesienia do twojego wideo, jedno w <video>tagu dla Chrome i Firefox, a drugie w <img>tagu dla Safari. Ciekawostka, że ​​filmy są odtwarzane w <img>tagu w Safari. Następnie napisz prosty skrypt, aby ukryć jedną lub drugą, gdy używana jest określona przeglądarka. Na przykład:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Pomaga to również rozwiązać problem cienkiej czarnej ramki / obramowania w niektórych filmach w niektórych przeglądarkach, w których są one renderowane nieprawidłowo.

Miałem ten problem, gdy odtwarzanie .mp4 w Safari nie działało, ale w innych przeglądarkach było dobrze. Błąd, który widziałem w konsoli, to: Error media src not supported. W moim przypadku okazało się, że jest to problem z typem MIME, ale nie dlatego, że nie został zadeklarowany jako typ MIME w usługach IIS, a raczej że został zadeklarowany dwukrotnie (raz w usługach IIS, a także w pliku web.config). Przekonałem się o tym, próbując pobrać plik .mp4 lokalnie na serwerze. Usunąłem plik konfiguracyjny z lokalizacji zawartości, którą próbowałem odtworzyć, i rozwiązałem problem. Mogłem po prostu usunąć typ MIME z pliku web.config, ale w tym przypadku plik web.config nie był potrzebny.

W przypadku systemu IOS należy używać tylko pliku źródłowego mp4. Zauważyłem jeden problem w najnowszej przeglądarce Safari, że przeglądarka Safari nie jest w stanie poprawnie wykryć pliku źródłowego i z tego powodu autoodtwarzanie wideo nie działa.

Sprawdźmy poniższy przykład -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Ponieważ użyłem mp4, webm w plikach źródłowych. Safari nie obsługuje WebM, ale nadal jest w najnowszej wersji Safari, wybierze WebM i nie powiedzie się autoodtwarzanie wideo.

Aby więc działało autoodtwarzanie w obsługiwanych przeglądarkach, sugerowałbym najpierw sprawdzić przeglądarkę i na tej podstawie wygenerować swój kod HTML.

Więc do safari użyj poniżej html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Dla innych niż safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Miałem ten sam problem - upewnij się, że adres URL zasobu wideo pochodzi z bezpiecznej domeny. Nasze środowisko deweloperskie to http, a produkcja jest bezpieczna. Ze względu na to, że do wideo odwoływano się za pośrednictwem ścieżki względnej, nie działał on podczas tworzenia. Wygląda na to, że Apple wymaga bezpieczeństwa wideo ...

działa, ale MacOs ostatnio wprowadził zasady autoodtwarzania dla użytkowników: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , rozwiązałem ten sam problem za pomocą przycisku włączającego dźwięk:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

Miałem ten sam problem. Ponieważ rozmiar mojej klatki wideo był za duży. np. Apple o rozdzielczości 2248 pikseli obsługuje wideo H.264 Baseline Profile Level 3.0, do 640 x 480 przy 30 fps. Zwróć uwagę, że ramki B nie są obsługiwane w profilu Baseline. sprawdź to, aby uzyskać więcej informacji

W moim przypadku pomogło upuszczenie ścieżki dźwiękowej. Wcześniej było cicho, ale musiało zniknąć całkowicie.

Na Ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

Safari / komputer zaczyna odtwarzać wideo

W moim przypadku były dwie rzeczy :

1. Nie używałem zasad nowego atrybutu / zestawu webkit playsinline ;
2. Moje wideo / MIME lub Whathathell nie były poprawnie zakodowane, więc użyłem tej witryny, aby przekonwertować je na wszystkie potrzebne formaty: https://pt.converterpoint.com/

o /

Miałem dokładnie ten sam problem, mój tag wideo HTML grał dobrze w Chrome i Mozilli, w Safari - pojawiły się elementy sterujące, ale wideo było puste. Próbowałem grać wszystkimi powyższymi atrybutami, usuwać / dodawać wyciszone, playInline itp. I nic nie działało. Problem dotyczył serwerów, jak opisano tutaj. Miałem to - NIE DZIAŁAŁO:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

i właśnie przeniosłem wideo do zewnętrznej biblioteki i mam teraz dobrze w Safari, DZIAŁA dobrze:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Nic nie działało, poza kompresją wideo do mniej niż 30 MB. To załatwiło sprawę, ale przy bardzo złej kompresji.

Jeśli ktoś miał ten sam problem, rozwiązałem go, włączając obsługę Byte-Range na moim serwerze. Wygląda na to, że Safari wymaga żądań dotyczących zakresu bajtów. W moim przypadku używam NGINX i musiałem dodać proxy_force_ranges on;do mojego pliku konfiguracyjnego. Dzięki tej odpowiedzi !

Jeśli używasz w REACT, playsInlinedziała to we wszystkich urządzeniach IOS