Wideo GWT i HTML5 w mobilnym Safari

Próbuję zakodować stronę w GWT, która odtwarza filmy z HTML5. Wszystko działa świetnie na pulpicie, ale mobilne Safari na iPhonie i iPadzie nie odtwarza wideo.Wideo GWT i HTML5 w mobilnym Safari

Mogę odtwarzać wideo przy użyciu Video for Everybody. Nawet skopiowałem kod do mojej własnej strony HTML i działa bezbłędnie. Jeśli podam ten sam kod za pomocą widżetu GWT, mobilne safari nie odtworzy wideo. Na iPhonie widzę szare pudełko ze znakiem zakazu wokół przycisku odtwarzania, a na iPadzie pojawia się jako czarne pudełko.

Upewniłem się, że mój doctype to <!DOCTYPE html>, ale nie wiem, gdzie jeszcze rozpocząć debugowanie. Być może to dlatego, że kod jest wstrzykiwany za pośrednictwem javascript? Wszelkie wskazówki na temat tego, gdzie zacząć szukać, byłyby bardzo mile widziane.

Oto dokładny kod używam do tego filmu wideo:

<!-- "Video For Everybody" by Kroc Camen. see <camendesign.com/code/video_for_everybody> for documented code 
    =================================================================================================================== --> 
<video width="640" height="360" poster="poster.jpg" controls autoplay> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></source> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"></source> 
    <!--[if gt IE 6]> 
    <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! 
    [endif]--><!--[if !IE]><!--> 
    <object width="640" height="375" type="video/quicktime" data="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> 
    <!--<![endif]--> 
    <param name="src" value="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
    <param name="autoplay" value="true" /> 
    <param name="showlogo" value="false" /> 
    <object width="640" height="384" type="application/x-shockwave-flash" 
     data="player.swf?autostart=true&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> 
     <param name="movie" value="player.swf?autostart=true&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
     <!-- fallback image --> 
     <img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny" 
      title="No video playback capabilities, please download the video below" /> 
    </object><!--[if gt IE 6]><!--> 
    </object><!--<![endif]--> 
</video>

EDIT:

I coppied źródła, który był wyświetlany na moim iPhone/iPad za pomocą this bookmarklet. Następnie skopiowałem ten kod do zwykłej strony HTML, która działa bezbłędnie. Musi mieć coś wspólnego z tagiem wideo generowanym przez javascript. (IE klikam przycisk i tag wideo jest generowany bez odświeżania strony).

Nie jestem pewien, czy problem dotyczy mobilnego safari, czy generuje javascript GWT, ale tak czy inaczej będę musiał znaleźć obejście.

EDIT (23.07.10):

mam wrócić i ponownie odwiedził problem. Odkąd napisałem to pytanie, całkowicie zmieniłem układ strony, aby używać LayoutPanels zamiast DockPanels i panele Vertical/Horizontal. Uaktualniłem także wersję GWT 2.0.4. Używanie iPada z iOS 3.2.1 nadal nie odtwarza wideo, ale otrzymuję ramkę plakatową, gdy ją określam (tak jak poprzednio). W przypadku iPhone'a 4 i iOS 4.0.1 film jest odtwarzany bez problemów. Wygląda na to, że nieważne, czym jest ten problem, naprawiono go na iOS 4.

Źródło

2010-04-09 KevMo

Hej, używasz UiBinder? –

Zrobiłem wdrożenie i utknąłem z graniem w iPada. teraz stwierdziłem, że jest to problem związany z moim serwerem. –

Poniższy kod działa na moim iPhonie (zignoruj część nazwy pakietu, ignorując nazwę GxtSandbox, nie ma żadnych materiałów GXT, jak widać). Mam stronę hostowaną pod numerem http://binarymuse.net/video/GxtSandbox.html, którą możesz odwiedzić na urządzeniu mobilnym w celu przetestowania.

package net.binarymuse.gwt.gxt.client; 

import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.user.client.ui.DialogBox; 
import com.google.gwt.user.client.ui.HTML; 

public class GxtSandbox implements EntryPoint { 

    public void onModuleLoad() { 
     DialogBox box = new DialogBox(true); 
      box.setWidget(new HTML("<video width='640' height='360' poster='poster.jpg' controls autoplay>" + 
      "<source src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' type='video/mp4'></source>" + 
      "</video>")); 
     box.center(); 
    } 
}

Szara skrzynka ze znakiem zakazów wyświetlaczy podczas próby użycia pliku .ogv jako źródła - być może Mobile Safari stara się wykorzystać, że z jakiegoś powodu?

Polecam tworzenie niektórych klas GWT, które używają odroczonego powiązania, aby utworzyć odpowiedni znacznik dla komputowanej permutacji przeglądarki. Możesz także znaleźć coś użytecznego pod adresem gwt-html5-media.

Źródło

2010-04-18 05:54:16

Przetestowałem ten link na iPadzie. Ten sam problem z czarną skrzynką. Działa to jednak na moim iPhonie. Nawet ograniczyłem kod do tagu wideo ze źródłem mp4 i nadal mam ten sam problem na iPhonie i iPadzie. Rzucę okiem na ten drugi link i zobaczę, co mogę znaleźć. – KevMo

GXT nie jest właściwym rozwiązaniem. Musisz wykryć, że twoja przeglądarka to mobilne safari. zobacz właściwy sposób wykrywania mobile browsers in GWT, a następnie utwórz widget, który otoczy tag wideo.

Źródło

2010-04-19 13:15:41 Cbe317

Stworzyłem widżet GWT, który otacza tag wideo. Kod w moim pytaniu pochodzi z widgetu. – KevMo

Myślę, że problem pochodzi z Flasha, ponieważ iPad i iPhone nie obsługują go. Należy utworzyć widget wideo GWT, który wykorzystuje ogólną implementację HTML5 VideoImpl i inną implementację Flash VideoImplFlash (rozszerzenie VideoImpl) dla przeglądarek innych niż HTML5. Wybór implementacji zostanie dokonany za pomocą funkcji wykrywania przeglądarki GWT za pomocą deffered binding. Zobacz com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java, com.google.gwt.user.client.ui.impl.TextBoxImpl.java i com .google.gwt.user.client.ui.impl.TextBoxImplIE6.java na przykład w kodzie GWT – Cbe317

nawet przy użyciu widgetu do zawijania tylko tagu wideo powoduje ten sam problem. – KevMo

Aby obsługiwać inne funkcje HTML5, można również wyświetlić GWT-Mobile-Webkit project.

Źródło

2010-04-19 13:19:37 Cbe317

widzę masz

<object width="640" height="384" type="application/x-shockwave-flash"

w kodzie.

Apple produkty mobilne minus laptop nie obsługują flash.

(co jest najgłupsze rzeczy, jakie kiedykolwiek widziałem, założę Apple zamierza zabronić powietrze i wodę w tam kolejnej umowy licencyjnej.)

Spróbuj także:

<!DOCTYPE html>

jeśli są używając html 5

Źródło

2010-04-28 14:43:56 tcables

, dlatego farmville nie będzie działać na moim iPhonie ... Cholera – KevMo

Również HTML 5 jest niedostępne, dopóki iPhone OS 4.0 – tcables

nie obsługuje filmów HTML 5 od czasu iPhone OS 3.0 – KevMo

Jak już wcześniej wspomniałem w swoim komentarzu z 21 kwietnia, iPhone, iPad i wszystkie ... i nie obsługuję Flasha, i nie będę go wspierał. Ale iPhone OS 3.0 Wsparcie znaczników HTML5 video, jak można przeczytać w tym article i zobaczyć go w tym one

AKAMAI jest dostawcą video a strona iPhone korzysta tag wideo HTML5.

iPhone obsługuje tylko filmy w formacie MP4 lub pliki audio AAC.

Źródło

2010-04-29 16:34:06 Cbe317

OK Próbowałem to również zrozumieć. Mogę sprawić, aby wideo HTML5 działało w Firefoksie, Chrome i Safari, po prostu nie moblie Safari na mojego iPada lub iPhone'a.

Moje pytanie do was brzmi: jak się macie do serwowania plików z filmami? Czy czytaliście tę stronę?

http://developer.apple.com/iphone/library/technotes/tn2010/tn2224.html

Mówi o segmentacji wysłać film w oddzielnych bitów danych. Zauważ, jak oni sugerują, aby wysłać plik ...

<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"> 
    This browser does not support HTML5 video. 
</video>

Ponadto, warto sprawdzić

http://www.ioncannon.net/projects/http-live-video-stream-segmenter-and-distributor/

http://www.ioncannon.net/programming/1015/ipad-streaming-video-and-more/

http://www.ioncannon.net/programming/452/iphone-http-streaming-with-ffmpeg-and-an-open-source-segmenter/

EDIT

Jeszcze jeden link, ten całkowicie pomógł mi zrozumieć mój problem. Zobacz, jak używamy nginx i jednorożca, aby uruchomić naszą stronę Railsów. Niestety nginx nie obsługuje żądań bajtowych, ale apache to robi. Więc przetestowałem to na Apache i działało. Oto artykuł, którego użyłem jako odnośnika, aby to zrozumieć.

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

uwaga ta linia kodu

curl --range 0-99 http://example.com/test.mov -o /dev/null

można używać, aby sprawdzić, czy Twój serwer obsługuje żądania bajt zasięgu.

Mam nadzieję, że pomaga to niektórym osobom.

Źródło

2010-05-01 04:28:58 taelor

Odpowiedział już wątek, ale nie znaleźliśmy to:

nie zawierają atrybut plakat() dla iPad/iPhone 3.x wsparcia. Istnieje poważny błąd w systemie iPhone OS 3, który oznacza, że odtwarzanie nie będzie działać w przypadku żadnego tagu wideo HTML5, który używa zarówno atrybutu, jak i elementów plakatu. Zostało to naprawione w systemie iPhone OS 4.0, ale oczywiście na razie nadal będzie duża liczba użytkowników systemu operacyjnego 3. Ten błąd nie wpływa na użycie obrazu plakatu w parametrze flashvars, który powinieneś zachować.

Źródło

2010-09-24 09:20:28 Blundell

Wideo GWT i HTML5 w mobilnym Safari

Odpowiedz

Powiązane problemy