Vidéo GWT & HTML5 dans un Safari Mobile
j'essaie de coder un site à GWT qui joue des vidéos avec HTML5. Tout fonctionne très bien sur le bureau, mais le Safari mobile sur l'iPhone et l'iPad ne jouent pas la vidéo.
je peux lire une vidéo en utilisant la Vidéo pour tout le monde. J'ai même copié le code sur ma propre page HTML, et ça marche parfaitement. Si je sers ce même code via un widget GWT, mobile safari ne lira pas la vidéo. Sur l'iPhone je vois une boîte grise avec un signe d'interdiction autour de la pièce bouton, et sur l'iPad il se présente comme une boîte noire.
je me suis assuré que mon doctype est <!DOCTYPE html>, mais je ne sais pas où commencer le débogage. Peut-être parce que le code est injecté via javascript? Toute indication sur l'endroit où commencer à chercher serait grandement appréciée.
<!-- "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&image=poster.jpg&file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
<param name="movie" value="player.swf?autostart=true&image=poster.jpg&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:
j'ai Coppé la source qui était affichée sur mon iPhone/iPad en utilisant ce bookmarklet. J'ai ensuite copié ce code sur une page HTML, qui fonctionne parfaitement. Il doit avoir quelque chose à voir avec la balise vidéo généré par javascript. (C'est-à-dire que je clique sur un bouton et la balise vidéo est générée sans rafraîchir la page.)
Je ne suis pas sûr que le problème soit un safari mobile, ou que le JavaScript GWT génère, mais dans tous les cas je vais devoir trouver une solution.
MODIFIER (7/23/10):
je suis revenu et visité de nouveau le problème. Depuis que j'ai posté la question, j'ai complètement changé la mise en page de la page pour utiliser des panneaux de mise en page au lieu de DockPanels et des panneaux verticaux/horizontaux. Je suis aussi passé à GWT 2.0.4. En utilisant un iPad avec iOS 3.2.1 il ne joue toujours pas la vidéo, mais je ne reçois le cadre de l'affiche quand je le spécifie (même que précédemment). Avec un iPhone 4 et iOS 4.0.1, la vidéo se lit sans problème. Quel que soit le problème, c'est réglé avec iOS 4.
7 réponses
OK, j'ai essayé de le comprendre ainsi. Je peux obtenir la vidéo HTML5 à travailler dans Firefox, Chrome, et Safari, tout simplement pas Safari mobile pour mon iPad ou iPhone.
ma question pour vous les gars est, comment Êtes-vous les gars servant les dossiers de film? Avez-vous les gars de lire cette page?
https://developer.apple.com/library/content/technotes/tn2224/_index.html
il parle d'un segmenter pour envoyer le film en bits de données séparés. Remarquez comment ils suggèrent d'envoyer le fichier...
<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8">
This browser does not support HTML5 video.
</video>
http://www.ioncannon.net/projects/http-live-video-stream-segmenter-and-distributor/
http://www.ioncannon.net/programming/1015/ipad-streaming-video-and-more/
EDIT
encore un lien, celui-ci m'a totalement aidé à résoudre mon problème. Consultez nous utiliser Nginx et unicorn pour gérer notre site Rails. Malheureusement, NGINX ne supporte pas les requêtes byte-range, contrairement à apache. Donc J'ai testé ça sur Apache et ça a marché. Voici l'article que j'ai utilisé comme référence à la figure.
notez cette ligne de code
curl --range 0-99 http://example.com/test.mov -o /dev/null
vous pouvez utiliser cela pour voir si votre serveur supporte les requêtes byte-range.
GXT n'est pas la bonne solution. Vous devez détecter que votre navigateur est safari mobile. voir la bonne façon de détecter les navigateurs mobiles dans GWT et ensuite créer un widget qui enveloppe la balise vidéo.
comme je l'ai déjà dit dans mon commentaire du 21 avril, iPhone, iPad et tout I... ne supporte pas Flash, et ne le supportera jamais. Mais iPhone OS 3.0 support Tag vidéo HTML5 comme vous pouvez le lire dans ce article le voir en ce
AKAMAI est un fournisseur de vidéo et la page iPhone utilise la balise vidéo HTML5.
iPhone supporte uniquement les vidéos mp4 ou les fichiers audio AAC.
le code suivant fonctionne sur mon iPhone (veuillez ignorer le GxtSandbox une partie du nom du paquet, pas de GXT choses est utilisé, comme vous pouvez le voir). J'ai une page hébergée à http://binarymuse.net/video/GxtSandbox.html que vous pouvez visiter sur votre appareil mobile pour des tests.
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();
}
}
La boite grise avec le signe d'interdiction s'affiche lorsque vous essayez d'utiliser l' .ogv fichier comme la source--peut-être Safari Mobile essaie-t-il d'utiliser cela pour une raison quelconque?
je il est recommandé de créer des classes GWT qui utilisent la liaison différée pour créer la balise appropriée pour la permutation du navigateur compilée. Vous pouvez également trouver quelque chose d'utile à gwt-html5-media.
pour supporter d'autres fonctionnalités HTML5, vous pouvez aussi voir le projet GWT-Mobile-Webkit.
je vois que vous avez
<object width="640" height="384" type="application/x-shockwave-flash"
dans votre code.
les produits apple mobile Moins l'ordinateur portable ne supportent pas flash.
essayez Aussi:
<!DOCTYPE html>
si vous utilisez html 5
Répondu fil déjà, mais je n'ai trouver ceci:
ne pas inclure L'attribut poster () pour iPad / iPhone 3.x SUPPORT. Il y a un bug majeur avec iPhone OS 3 qui signifie que la lecture ne fonctionnera pas sur une balise vidéo HTML5 qui utilise à la fois l'attribut poster et les éléments. Cela a été corrigé dans l'iPhone OS 4.0, mais bien sûr pour l'instant il y aura encore un grand nombre d'utilisateurs de OS 3. Ce bug n'affecte pas l'utilisation de l'image d'affiche dans le paramètre flashvars, que vous devriez conserver.