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
iphone
ipad
safari
html5-video
mobile-safari
Khaled Al Hage Ismail
źródło
źródło
autoplay
: developer.apple.com/library/safari/documentation/AudioVideo/… ..playsinline
w tagu wideo?Odpowiedzi:
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ć
playsinline
atrybut 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
.źródło
playsInline
, w camelCase.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>
źródło
autoplay
opcji zadziałało. Mamcontrols="false"
w swoim kodzie.controls="false"
jest zbędne;controls
sam w sobie jest wartością logiczną, która gdy jest obecna, włącza kontrolki, a gdy nie jest obecna, nie ma kontrolek. Zobacz specyfikacjęcontrols
jest to atrybut logiczny, jedynymi prawidłowymi wartościami są brak, pusty ciąg lub jego własna nazwa. Wartości prawda i fałsz są niepoprawne.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 :
Możesz poszukać w Internecie hasła „zakres bajtów iphone mp4”.
źródło
RangeResult.ofPath(finalPath, range, Some(mime))
i powinna działać w wersji 2.7 i nowszej.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.
źródło
Dla przyszłych wyszukiwań, jak również, miałem plik mp4, że zredukowanego z hamulca ręcznego korzystając
handbrake-gtk
zapt-get
npsudo apt-get install handbrake-gtk
. W Ubuntu 14.04handbrake
repozytorium 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/mp4
ivideo/m4v
bez efektu. Testowałem też dodaniecontrol
atrybutu 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).
źródło
Po prostu dodaj
muted
atrybut i wszystko będzie dobrze działać.Źródło tej odpowiedzi jest tutaj: https://webkit.org/blog/6784/new-video-policies-for-ios/
źródło
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.
źródło
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.
źródło
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
źródło
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
źródło
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
.mov
wcześ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.źródło
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>
`
źródło
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.
źródło
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.
źródło
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>
źródło
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 ...
źródło
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>
źródło
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
źródło
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
źródło
W moim przypadku były dwie rzeczy :
playsinline
;o /
źródł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>
źródło
Nic nie działało, poza kompresją wideo do mniej niż 30 MB. To załatwiło sprawę, ale przy bardzo złej kompresji.
źródło
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 !źródło
Jeśli używasz w REACT,
playsInline
działa to we wszystkich urządzeniach IOSźródło