Ładowanie iPada/iPhone'a HTML5 wideo

Question

Próbuję wczytać w locie na iPadzie/iPhonie i zauważyć, że nie mogę umieścić elementu div powyżej. Umieściłem nakładkę w html, aby była generowana przy ładowaniu strony, a nie dodawana przez javascript i wideo, gdy jego utworzone jest absolutnie umieszczone poniżej tego elementu. Działa to na PC, zastanawiam się, czy skoro został utworzony przez js, system operacyjny iPhone przesłonił indeks Z i zmusił go do góry?

Czy istnieje również sposób na zastąpienie domyślnej "nie można odtwarzać ikony", tej z ukośnikiem i zamiast tego wyświetlać animację ładowania? To rozwiązałoby mój problem przez inną trasę.

Moja ostatnia opcja polegałaby na załadowaniu wszystkich tagów wideo przez js na stronie ładowania i nałożeniu ich na siebie nawzajem dla iPada/iPhone'a? Ponieważ system operacyjny iPhone nie załaduje żadnego filmu wideo, dopóki nie zostanie zgłoszony, czy to działa?

Mam również problem z iPhonem i wyświetlam atrybut "plakatu" ustawiony na tagu wideo.

Answer 1

iPhone nie obsługuje plakat ... aż OS4

Answer 2

Można ustawić obraz absolutnie nad odtwarzaczem wideo. Safari na iPhonie wyrenderuje je z przezroczystym symbolem "odtwarzania". Wierzę, że coś takiego może działać:

<style type="text/css"> 
div.player 
{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

div.player > img.preview 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9; 
    cursor: pointer; 
} 
</style> 

And

<div class="player"> 
    <img class="preview" src="zk/grumpies.png" width="320" height="240" alt="click to play" title="click to play"> 
    <video width="320" height="240" controls="controls"> 
    <source type="video/mp4" src="mah/mahnamahna.m3u8" width="320" height="240" /> 
    </video> 
</div> 

Na iPadzie nim może działać w różny sposób w zależności od przypadku korzystania <video controls /> lub nie - w takim przypadku trzeba podać swoje własne kontrole z javascript lub nie będzie można uruchomić mediów.

Ikona "nie można odtwarzać" jest z reguły moim zdaniem normalnym wskazaniem, że nośnik nie może być odtwarzany ;-) z powodu niewłaściwego typu MIME lub kodeka, nieprawidłowego src itp. Zastąpienie byłoby przypadkiem sprawdzanie wyjątków błędów ładowania nośnika za pomocą javascript.

Nakładanie warstw na siebie jest niemożliwe. Możesz to udawać, zmieniając pozycje.

Answer 3

Miałem ten sam dokładny problem z odtwarzaczem wideo iPad. Wizualnie indeks Z był niższy niż nakładka okna dialogowego, ale w rzeczywistości tak nie było. Jeśli zastąpisz domyślne formanty własnym przy użyciu javascript, problem zniknie.

http://sandbox.solutionsbydesign.com/montage/ipad/

kiedyś artykuł NetTuts na tworzeniu własnego odtwarzacza wideo HTML5

Answer 4

znalazłem całkiem miłe obejście. Jestem przy użyciu jquery, więc o tym należy pamiętać.

Mój problem polegał na tym, że budowałem aplikację internetową na iPadzie z przyciskiem nawigacyjnym w lewym dolnym rogu (nie mogę podać linku, ponieważ jest to projekt klienta). Kiedy użytkownik kliknie (dotknie) przycisk w lewym dolnym rogu, menu rozwijane będzie animowane, a następnie można kliknąć przyciski w tych menu, aby dostać się do głębszych podmenu.

Problem:

żadnych tagów li (lub coś dla tej sprawy), które było nad filmem, nie byłoby klikalne, więc na stronach z wideo, część mojego zaczepów nawigacji (the część nad filmem nie działa).Czytanie wpisów tutaj faktycznie prowadzi mnie do mojego rozwiązania, proste i może, ale nie musi działać w twoim przypadku, ale mam nadzieję, że tak się stanie.

Moja obejście:

var myNav = $("TAG_SELECTOR_HERE"); 

myNav.toggle(function(){ 
    var videos = $("video"); 
    videos.removeAttr("controls"); 
}, 
function(){ 
    var videos = $("video"); 
    videos.attr("controls","true"); 
}) 

Teraz wiem, że może brakować niektórych średników lub mój kodowanie może być wyłączony, ale ja po prostu opublikowania w celach informacyjnych. Zasadniczo, gdy moje menu jest klikane lub jest aktywne, usuwam atrybut sterujący ze wszystkich filmów, a kiedy menu jest dezaktywowane, przywracam sterowanie.

Możesz użyć tej metody w dowolnym miejscu ... możesz usunąć kontrolki po zakończeniu wideo, po tym, jak ktoś się nad czymś zakocha (zakładając, że coś nie jest już nad wideo), gdy mysz ma określone współrzędne (może być jedynym rozwiązaniem w skrajnych przypadkach), ale to powinno działać.

Dzięki!

-Nick