sirve - GWT y video HTML5 en Mobile Safari
html5 tutorial (7)
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 es compatible con la etiqueta de video HTML5 ya que puedes leerlo en este article y verlo en este
AKAMAI es un proveedor de videos y la página de iPhone usa una etiqueta de video HTML5.
iPhone solo admite videos mp4 o archivos de audio AAC.
Intento 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.
Puedo reproducir un video usando Video para todos . 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í está 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&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>
EDITAR:
Copié la fuente que se estaba mostrando en mi iPhone / iPad usando este 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. (Por ejemplo, hago clic en un botón y la etiqueta de video se genera sin una actualización de página).
No estoy seguro 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 (23/7/10):
Regresé y volví a visitar 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. Parece que, sea lo que sea, se soluciona con iOS 4.
El siguiente código funciona en mi iPhone (ignore la parte de GxtSandbox del nombre del paquete, no se está usando 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();
}
}
Aparece el cuadro gris con el signo prohibitorio cuando intenta utilizar el archivo .ogv como fuente; ¿quizás Safari móvil está intentando usar eso por alguna razón?
Recomiendo crear algunas clases de GWT que utilicen el enlace diferido para crear la etiqueta correcta para la permutación del navegador que se compila. También puede encontrar algo útil en gwt-html5-media .
GXT no es la solución correcta. Debes detectar que tu navegador es un safari móvil. vea la forma correcta de detectar navegadores móviles en GWT y luego cree un widget que ajuste la etiqueta de video.
OK, he estado tratando de resolver esto también. Puedo hacer que el video HTML5 funcione en Firefox, Chrome y Safari, pero no en Safari móvil 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?
https://developer.apple.com/library/content/technotes/tn2224/_index.html
Habla sobre un segmentador para enviar la película en partes de datos separadas. Observe cómo sugieren 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 retirar
http://www.ioncannon.net/projects/http-live-video-stream-segmenter-and-distributor/
http://www.ioncannon.net/programming/1015/ipad-streaming-video-and-more/
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.
tenga en cuenta esta línea de código
curl --range 0-99 http://example.com/test.mov -o /dev/null
Puede usar eso para ver si su servidor admite solicitudes de rango de bytes.
Para admitir otras características HTML5, también puede ver el proyecto GWT-Mobile-Webkit .
Veo que tienes
<object width="640" height="384" type="application/x-shockwave-flash"
en tu código
Los productos móviles Apple sin la computadora portátil no admiten flash.
(que es la cosa más estúpida que he visto, apuesto a que Apple va a rechazar el aire y el agua en el próximo acuerdo de licencia).
Intenta también:
<!DOCTYPE html>
si estás usando html 5
Ya ha respondido el hilo, pero encontré esto:
NO INCLUYA EL ATRIBUTO del póster () PARA APOYO iPad / iPhone 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.