GWT y video HTML5 en Mobile Safari

Estoy intentando codificar un sitio en GWT que reproduce videos con HTML5. Todo funciona muy bien en el escritorio, pero Safari móvil tanto en el iPhone como en el iPad no reproduce el video.GWT y video HTML5 en Mobile Safari

Puedo reproducir un video usando Video for Everybody. Incluso he copiado el código en mi propia página HTML simple, y funciona sin problemas. Si sirvo el mismo código a través de un widget de GWT, el safari móvil no reproducirá el video. En el iPhone veo una caja gris con un letrero prohibitorio alrededor del botón de reproducción, y en el iPad aparece como una caja negra.

Me he asegurado de que mi doctype sea <!DOCTYPE html>, pero no sé dónde más para comenzar la depuración. Tal vez es porque el código se inyecta a través de javascript? Cualquier sugerencia sobre dónde empezar a buscar sería muy apreciada.

Aquí es el código exacto que estoy usando para el video:

<!-- "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 la fuente que se está visualizando en mi iPhone/iPad usando this bookmarklet. Luego copié ese código en una página HTML simple, que funciona a la perfección. Debe tener algo que ver con la etiqueta de video que se genera a través de JavaScript. (IE hago clic en un botón y la etiqueta de video se genera sin una actualización de página.)

No estoy seguro de si el problema es el safari móvil, o el javascript GWT genera, pero de cualquier manera tendré que encontrar una solución alternativa

EDITAR (7/23/10):

he vuelto y re-visitó el tema. Desde que publiqué la pregunta, modifiqué por completo el diseño de la página para usar LayoutPanels en lugar de DockPanels y paneles verticales/horizontales. También me actualicé a GWT 2.0.4. Usando un iPad con iOS 3.2.1 todavía no reproduce video, pero obtengo el marco del póster cuando lo especifico (igual que antes). Con un iPhone 4 y iOS 4.0.1, el video se reproduce sin problemas. Así que parece que cualquiera que sea el problema, está solucionado con iOS 4.

Fuente

2010-04-09 KevMo

hey, ¿estás usando UiBinder? –

hice la implementación y me quedé con jugar lo mismo en ipad. ahora encontré que es un problema relacionado con mi servidor. –

El siguiente código funciona en mi iPhone (ignore la parte GxtSandbox del nombre del paquete, no se está utilizando nada de GXT, como puede ver). Tengo una página alojada en http://binarymuse.net/video/GxtSandbox.html que puede visitar en su dispositivo móvil para realizar pruebas.

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

El cuadro gris con las pantallas de prohibición cuando se intenta utilizar el archivo .ogv como la fuente - tal vez Mobile Safari está tratando de usar que por alguna razón?

Recomendaría crear algunas clases de GWT que utilicen el enlace diferido para crear la etiqueta correcta para la permutación del navegador que se está compilando. También puede encontrar algo útil en gwt-html5-media.

Fuente

2010-04-18 05:54:16

Probé ese enlace en un iPad. Mismo problema con la caja negra. Sin embargo, funciona en mi iPhone. Incluso reduje mi código a solo la etiqueta de video con la fuente mp4, y todavía tengo el mismo problema tanto en el iPhone como en el iPad. Echaré un vistazo a ese segundo enlace y veré qué puedo encontrar. – KevMo

GXT no es la solución correcta. Debes detectar que tu navegador es un safari móvil. vea la forma correcta de detectar mobile browsers in GWT y luego cree un widget que ajuste la etiqueta del video.

Fuente

2010-04-19 13:15:41 Cbe317

Creé un widget GWT que envuelve la etiqueta de video. El código en mi pregunta proviene de un widget. – KevMo

Creo que el problema proviene de Flash porque el iPad y el iPhone no lo admiten. Debe crear un widget de video GWT que use una implementación genérica HTML5 de VideoImpl y otra implementación Flash VideoImplFlash (que extienda VideoImpl) para navegadores que no sean HTML5. La elección de la implementación se realizará mediante el mecanismo de detección del navegador GWT utilizando enlace diferido. Ver com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java, com.google.gwt.user.client.ui.impl.TextBoxImpl.java y com .google.gwt.user.client.ui.impl.TextBoxImplIE6.java por ejemplo en código GWT – Cbe317

incluso utilizando el widget para envolver sólo los resultados de la etiqueta de vídeo en el mismo problema – KevMo

Para admitir otras características de HTML5, también puede ver el GWT-Mobile-Webkit project.

Fuente

2010-04-19 13:19:37 Cbe317

veo que tiene

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

en el código.

Los productos móviles Apple menos la computadora portátil no admiten flash.

(que es lo más tonto que he visto, apuesto a que Apple va a rechazar el aire y el agua en que hay junto contrato de licencia.)

Proveedores:

<!DOCTYPE html>

si su es usando html 5

Fuente

2010-04-28 14:43:56 tcables

así que por eso Farmville no funcionará en mi iPhone ... maldición – KevMo

Además, HTML 5 no está disponible hasta iPhone OS 4.0 – tcables

Los videos HTML 5 son compatibles desde iPhone OS 3.0 – KevMo

Como dije antes en mi comentario del 21 de abril, iPhone, iPad y todo lo que ... no soporto Flash, y lo soportare. Pero iPhone OS 3.0 el soporte de vídeo HTML5 Tag como se puede leer en este article y verlo en este one

AKAMAI es un proveedor de vídeo y la página de iPhone utiliza la etiqueta de vídeo HTML5.

iPhone solo admite videos mp4 o archivos de audio AAC.

Fuente

2010-04-29 16:34:06 Cbe317

OK He estado tratando de resolver esto también. Puedo hacer que el video HTML5 funcione en Firefox, Chrome y Safari, simplemente no moblie Safari para mi iPad o iPhone.

Mi pregunta para ustedes es, ¿cómo están ustedes sirviendo los archivos de la película? ¿Han leído esta página?

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

Se habla de un segmentador para enviar la película en trozos separados de datos. Observe cómo se sugieren para enviar el archivo ...

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

Además, es posible que desee revisar

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/

EDITAR

Un enlace más, este me ayudó a resolver mi problema. Nos vemos usando nginx y unicornio para ejecutar nuestro sitio de Rails. Lamentablemente, nginx no admite solicitudes de rango de bytes, pero apache sí. Así que probé esto en Apache y funcionó. Aquí está el artículo que utilicé como referencia para resolver esto.

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

nota esta línea de código

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

Puede utilizar eso para ver si su servidor soporta las solicitudes de intervalo de bytes.

Espero que esto ayude a algunas personas.

Fuente

2010-05-01 04:28:58 taelor

hilo contestada ya, pero he encontrado esto:

¡NO incluyen el atributo cartel() para iPad/iPhone SOPORTE 3.x. Hay una falla importante en el iPhone OS 3 que significa que la reproducción no funcionará en ninguna etiqueta de video HTML5 que use los atributos y elementos del póster. Esto se solucionó en iPhone OS 4.0, pero por supuesto, todavía habrá una gran cantidad de usuarios de OS 3. Este error no afecta el uso de la imagen del póster en el parámetro flashvars, que debe conservar.

Fuente

2010-09-24 09:20:28 Blundell

Respuesta

Cuestiones relacionadas