GWT & HTML5 Видео в Mobile Safari

Я пытаюсь закодировать сайт в GWT, который воспроизводит видео с помощью HTML5. Все отлично работает на рабочем столе, но мобильный Safari на iPhone и iPad не воспроизводит видео.GWT & HTML5 Видео в Mobile Safari

Я могу воспроизвести видео, используя Video for Everybody. Я даже скопировал код на свою собственную HTML-страницу, и он работает безупречно. Если я обслуживаю этот же код через виджет GWT, мобильное сафари не будет воспроизводить видео. На iPhone я вижу серый квадрат с запрещающим значком вокруг кнопки воспроизведения, а на iPad он отображается как черный ящик.

Я убедился, что мой doctype равен <!DOCTYPE html>, но я не знаю, где еще начать отладку. Возможно, это потому, что код вводится через javascript? Любые указатели на то, где начать искать, будут очень признательны.

Вот точный код, я использую для видео:

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

Я coppied источник, который отображается на моем iPhone/IPad с помощью this bookmarklet. Затем я скопировал этот код на обычную HTML-страницу, которая работает безупречно. Он должен иметь какое-то отношение к тегу видео, создаваемому через javascript. (IE я нажимаю на кнопку, и видео-тег генерируется без обновления страницы.)

Я не уверен, что проблема связана с мобильным сафари или генерирует JWB скрипт, но в любом случае мне придется найти обходной путь.

EDIT (7/23/10):

Я вернулся и вновь посетил этот вопрос. Поскольку я разместил этот вопрос, я полностью изменил макет страницы, чтобы использовать LayoutPanels вместо DockPanels и вертикальных/горизонтальных панелей. Я также обновился до GWT 2.0.4. Используя iPad с iOS 3.2.1, он все еще не воспроизводит видео, но я получаю рамку плаката, когда я указываю его (как и раньше). С iPhone 4 и iOS 4.0.1 видео воспроизводится без проблем. Таким образом, все выглядит так, как бы это ни было, исправлено с iOS 4.

источник

2010-04-09 KevMo

эй, вы используете UiBinder? –

Я сделал реализацию и застрял, играя то же самое в ipad. теперь я обнаружил, что проблема связана с моим сервером. –

Следующий код работает на моем iPhone (пожалуйста, игнорируйте часть имени пакета, но GXT не используется, как вы можете видеть). У меня есть страница, размещенная на http://binarymuse.net/video/GxtSandbox.html, которую вы можете посетить на своем мобильном устройстве для тестирования.

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

серая коробка с запрещающим знаком отображается при попытке использовать файл .ogv в качестве источника - возможно, Mobile Safari пытается использовать это по какой-то причине?

Я бы рекомендовал создать некоторые классы GWT, которые используют отложенную привязку, чтобы создать правильный тег для компиляции перестановки браузера. Вы также можете найти что-то полезное в gwt-html5-media.

источник

2010-04-18 05:54:16

Я тестировал эту ссылку на iPad. Такая же проблема с черным ящиком. Однако он работает на моем iPhone. Я даже сократил свой код только на тег видео с источником mp4, и у меня все еще есть такая же проблема как на iPhone, так и на iPad. Я посмотрю на эту вторую ссылку и посмотрю, что я могу найти. – KevMo

GXT - это неправильное решение. Вы должны обнаружить, что ваш браузер является мобильным сафари. см. правильный способ обнаружения mobile browsers in GWT, а затем создать виджет, который обертывает тег видео.

источник

2010-04-19 13:15:41 Cbe317

Я создал виджет GWT, который обертывает тег видео. Код в моем вопросе исходит от виджета. – KevMo

Я думаю, что проблема исходит от Flash, потому что iPad и iPhone не поддерживают его. Вам необходимо создать виджет GWT Video, в котором используется общая реализация HTML5 VideoImpl и еще одна реализация Flash VideoImplFlash (расширение VideoImpl) для браузеров без HTML5. Выбор реализации будет выполняться с помощью GWT-браузера с использованием деффидированного привязки. См. Com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java, com.google.gwt.user.client.ui.impl.TextBoxImpl.java и com .google.gwt.user.client.ui.impl.TextBoxImplIE6.java, например, в коде GWT – Cbe317

, даже с использованием виджета, чтобы обернуть только теги видео тегов с той же проблемой – KevMo

Для поддержки других функций HTML5 вы также можете увидеть GWT-Mobile-Webkit project.

источник

2010-04-19 13:19:37 Cbe317

Я вижу, у вас есть

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

в вашем коде.

Яблоко мобильных продуктов минус ноутбук не поддерживает вспышку.

(который является тупой вещью, которую я когда-либо видел, я уверен, Apple, собирается запретить воздух и воду там следующего лицензионное соглашение.)

Также попробуйте:

<!DOCTYPE html>

если ваши используя html 5

источник

2010-04-28 14:43:56 tcables

так вот почему Farmville не будет работать на моем iPhone ... damn – KevMo

Также, HTML 5 недоступно до iPhone OS 4.0 – tcables

HTML 5 видео поддерживаются с iPhone OS 3.0 – KevMo

Как я уже говорил в своем комментарии от 21 апреля, iPhone, iPad и все, что я ... не поддерживают Flash и не поддерживают его. Но iPhone OS поддержка 3,0 HTML5 видео Tag, как вы можете прочитать в этом article и увидеть его в этом one

AKAMAI является видео поставщик и страница iPhone использует HTML5 тег видео.

iPhone поддерживает только видеоролики mp4 или аудиофайлы AAC.

источник

2010-04-29 16:34:06 Cbe317

OK Я тоже пытался понять это. Я могу получить HTML5-видео для работы в Firefox, Chrome и Safari, а не для Safari для iPad или iPhone.

Мой вопрос вам, ребята, как вы, вы, ребята, обслуживаете файлы фильмов? Вы, ребята, читали эту страницу?

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

Это говорит о сегментации, чтобы отправить фильм в отдельно бит данных. Обратите внимание на то, как они предлагают, чтобы отправить файл ...

<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/

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

EDIT

Еще одна ссылка, эта полностью помогла мне разобраться в моей проблеме. Смотрите, как мы используем nginx и unicorn для запуска нашего сайта Rails. К сожалению, nginx не поддерживает запросы байтового диапазона, но apache делает. Поэтому я тестировал это на Apache, и это сработало. Вот статья, которую я использовал в качестве ссылки, чтобы понять это.

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

примечание эта строка кода

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

Вы можете использовать это, чтобы увидеть, если ваш сервер поддерживает запросы байт-диапазона.

Надеюсь, это поможет некоторым людям выйти.

источник

2010-05-01 04:28:58 taelor

Ответил нить уже, но я нашел это:

НЕ ВКЛЮЧАЕТ плакат ATTRIBUTE() для IPad/iPhone 3.x поддержки. Существует большая ошибка с iPhone OS 3, что означает, что воспроизведение не будет работать на любом теге HTML5, который использует атрибут и элементы плаката. Это было исправлено в iPhone OS 4.0, но, конечно, на данный момент все еще будет большое количество пользователей OS 3. Эта ошибка не влияет на использование изображения плаката в параметре flashvars, который вы должны сохранить.

источник

2010-09-24 09:20:28 Blundell

GWT & HTML5 Видео в Mobile Safari

ответ

Смежные вопросы