GWT & HTML5 Video in Mobile Safari

Ich versuche eine Website in GWT zu codieren, die Videos mit HTML5 abspielt. Alles funktioniert gut auf dem Desktop, aber Mobile Safari sowohl auf dem iPhone als auch auf dem iPad spielt das Video nicht ab.GWT & HTML5 Video in Mobile Safari

Ich kann ein Video mit Video for Everybody spielen. Ich habe sogar den Code auf meine eigene einfache HTML-Seite kopiert, und es funktioniert einwandfrei. Wenn ich denselben Code über ein GWT-Widget ausliege, wird Mobile Safari das Video nicht wiedergeben. Auf dem iPhone sehe ich eine graue Box mit einem verbietenden Zeichen um die Play-Taste, und auf dem iPad wird es als eine schwarze Box angezeigt.

Ich habe sichergestellt, dass mein Doctype ist <!DOCTYPE html>, aber ich weiß nicht, wo sonst Debuggen zu starten. Vielleicht liegt es daran, dass der Code per Javascript eingespritzt wird? Irgendwelche Hinweise darauf, wo man anfangen sollte, würden sehr geschätzt werden.

Hier ist die genaue Code, den ich für das Video bin mit:

<!-- "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:

ich coppied die Quelle, die auf meinem iPhone/iPad mit this bookmarklet angezeigt wurde. Ich habe dann diesen Code auf eine einfache HTML-Seite kopiert, die einwandfrei funktioniert. Es muss etwas damit zu tun haben, dass das Video-Tag über Javascript generiert wird. (IE ich auf eine Schaltfläche klicken und das Video-Tag wird ohne eine Seite aktualisiert generiert.)

Ich bin mir nicht sicher, ob das Problem ist mobile Safari, oder das Javascript GWT generiert, aber so oder so muss ich finden ein Workaround.

EDIT (7/23/10):

Ich bin zurückgekommen und das Problem erneut besucht. Seit ich die Frage gepostet habe, habe ich das Layout der Seite vollständig geändert, um LayoutPanels anstelle von DockPanels und vertikalen/horizontalen Panels zu verwenden. Ich habe auch auf GWT 2.0.4 aktualisiert. Mit einem iPad mit iOS 3.2.1 wird immer noch kein Video abgespielt, aber ich bekomme den Posterrahmen, wenn ich ihn spezifiziere (wie zuvor). Mit einem iPhone 4 und iOS 4.0.1 wird das Video ohne Probleme abgespielt. So sieht es aus wie immer das Problem ist, ist es mit iOS 4 behoben.

Quelle

2010-04-09 KevMo

hey, benutzen Sie UiBinder? –

Ich habe die Implementierung und war mit dem Spielen der gleichen in ipad stecken. Jetzt habe ich festgestellt, dass es sich um ein Problem handelt, das sich auf meinen Server bezieht. –

Der folgende Code funktioniert auf meinem iPhone (bitte ignorieren Sie die GxtSandbox Teil des Paketnamens, kein GXT Zeug wird verwendet, wie Sie sehen können). Ich habe eine Seite bei http://binarymuse.net/video/GxtSandbox.html gehostet, die Sie auf Ihrem mobilen Gerät zum Testen besuchen kann.

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(); 
    } 
}

Die graue Box mit den Verbotszeichen angezeigt, wenn Sie versuchen, die .ogv Datei als Quelle zu verwenden - vielleicht Mobile Safari versucht, aus irgendeinem Grund, dass zu benutzen?

ich empfehlen würde einige GWT-Klassen erstellen, wird zusammengestellt verwenden versetzte Bindung den richtigen Tag für den Browser Permutation zu erstellen. Sie können auch etwas unter gwt-html5-media nützlich finden.

Quelle

2010-04-18 05:54:16

Ich habe diesen Link auf einem iPad getestet. Dasselbe Problem mit der Blackbox. Es funktioniert jedoch auf meinem iPhone. Ich habe sogar meinen Code auf das Video-Tag mit der mp4-Quelle reduziert, und ich habe immer noch das gleiche Problem auf dem iPhone und iPad. Ich werde mir den zweiten Link ansehen und sehen, was ich finden kann. – KevMo

GXT ist nicht die richtige Lösung. Sie müssen erkennen, dass Ihr Browser Mobile Safari ist. siehe den richtigen Weg mobile browsers in GWT zu erkennen und dann erstellen Sie ein Widget, das den Video-Tag hüllt.

Quelle

2010-04-19 13:15:41 Cbe317

Ich habe ein GWT-Widget erstellt, das den Video-Tag umschließt. Der Code in meiner Frage stammt von einem Widget. – KevMo

Ich denke, das Problem kommt von Flash, weil iPad und iPhone es nicht unterstützen. Sie sollten ein GWT-Video-Widget erstellen, das eine generische HTML5-Implementierung von VideoImpl und eine andere Flash-Implementierung von VideoImplFlash (extending VideoImpl) für nicht HTML5-Browser verwendet. Die Wahl der Implementierung wird durch GWT-Browser-Erkennungsmechanismen unter Verwendung der getrennten Bindung getroffen. Siehe com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java, com.google.gwt.user.client.ui.impl.TextBoxImpl.java und com .google.gwt.user.client.ui.impl.TextBoxImplIE6.java zum Beispiel in GWT code – Cbe317

sogar mit dem Widget, um nur die Video-Tag-Ergebnisse in das gleiche Problem zu wickeln – KevMo

Um andere HTML5-Funktionen unterstützt, können Sie auch die GWT-Mobile-Webkit project sehen können.

Quelle

2010-04-19 13:19:37 Cbe317

Ich sehe Sie

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

in Ihrem Code haben.

Die Apple Mobile Produkte abzüglich des Laptops unterstützen keinen Flash.

(das ist die dümmste Sache, die ich je gesehen habe, ich wette, Apple-Luft und Wasser in es neben Lizenzvereinbarung nicht zulassen wird.)

Händler:

<!DOCTYPE html>

wenn Sie mit html 5

Quelle

2010-04-28 14:43:56 tcables

so das ist, warum Farmville nicht auf meinem iPhone funktioniert ... verdammt – KevMo

Auch HTML 5 ist nicht verfügbar bis iPhone OS 4.0 – tcables

HTML 5 Videos wurden seit iPhone OS 3.0 unterstützt – KevMo

Wie ich schon sagte in meinem Kommentar vom 21. April, iPhone, iPad und alle ich ... nicht unterstützt Flash und Won'tever Support es. Aber iPhone OS 3.0-Unterstützung HTML5-Video-Tag, wie Sie es in diesem article und sehen es in diesem one

AKAMAI lesen kann, ist ein Video-Anbieter und die iPhone-Seite nutzt HTML5-Video-Tag.

Das iPhone unterstützt nur mp4-Videos oder AAC-Audiodateien.

Quelle

2010-04-29 16:34:06 Cbe317

OK Ich habe versucht, dies auch herauszufinden. Ich kann das HTML5-Video in Firefox, Chrome und Safari verwenden, einfach nicht Safari für mein iPad oder iPhone.

Meine Frage an euch ist, wie geht es euch Jungs, die die Filmdateien servieren? Habt ihr diese Seite gelesen?

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

Es spricht von einem Segmentierer den Film in separaten Bits von Daten zu senden. Beachten Sie, wie sie vorschlagen, um die Datei zu senden ...

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

Auch möchten Sie vielleicht prüfen,

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

Ein weiterer Link, dieser hat mir völlig geholfen, mein Problem zu lösen. Sehen Sie, dass wir nginx und unicorn verwenden, um unsere Rails-Site zu betreiben. Leider unterstützt nginx keine Byte-Range-Anfragen, Apache aber. Also habe ich das auf Apache getestet und es hat funktioniert. Hier ist der Artikel, den ich als Referenz verwendet habe, um das herauszufinden.

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

Notiz diese Codezeile

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

Sie können das verwenden, um zu sehen, ob Ihr Server Byte-Range-Anforderungen unterstützt.

Hoffe das hilft ein paar Leute aus.

Quelle

2010-05-01 04:28:58 taelor

Beantwortet Thread schon, aber ich habe diese finden:

SIE DEN Plakat ATTRIBUTE NICHT include() für iPad/iPhone 3.x SUPPORT. Es gibt einen schwerwiegenden Fehler bei iPhone OS 3, das bedeutet, dass die Wiedergabe bei keinem HTML5-Video-Tag funktioniert, das sowohl das Poster-Attribut als auch die Elemente verwendet. Dies wurde in iPhone OS 4.0 behoben, aber natürlich wird es immer noch eine große Anzahl von OS 3 Benutzern geben. Dieser Fehler hat keinen Einfluss auf die Verwendung des Posterbildes im flashvars-Parameter, den Sie beibehalten sollten.

Quelle

2010-09-24 09:20:28 Blundell

GWT & HTML5 Video in Mobile Safari

Antwort

Verwandte Themen