Видео GWT и HTML5 в мобильном Safari

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

Я могу воспроизвести видео, используя Видео для всех. Я даже скопировал код на свою собственную 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:

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

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

EDIT (7/23/10):

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

Ответ 1

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/

ИЗМЕНИТЬ

Еще одна ссылка, эта полностью помогла мне разобраться в моей проблеме. Смотрите, как мы используем 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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

Следующий код работает на моем iPhone (пожалуйста, проигнорируйте часть GxtSandbox имени пакета, не используется 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.

Ответ 5

Чтобы поддерживать другие функции HTML5, вы также можете увидеть проект GWT-Mobile-Webkit.

Ответ 6

Я вижу, что у вас

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

в вашем коде.

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

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

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

<!DOCTYPE html>

если вы используете html 5

Ответ 7

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

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