GWT и HTML5 видео в мобильном сафари - PullRequest
Новая
       30

GWT и HTML5 видео в мобильном сафари

22 голосов
/ 09 апреля 2010

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

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

Я убедился, что мой тип документа <!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-страницу, которая работает безупречно. Это должно быть как-то связано с тегом video, генерируемым с помощью javascript. (Т.е. я нажимаю кнопку, и видео-тег создается без обновления страницы.)

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

РЕДАКТИРОВАТЬ (23.07.10):

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

Ответы [ 7 ]

6 голосов
/ 01 мая 2010

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

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

https://developer.apple.com/library/content/technotes/tn2224/_index.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 и единорога для запуска нашего сайта Rails. К сожалению, nginx не поддерживает запросы в диапазоне байтов, но apache поддерживает. Итак, я проверил это на Apache, и это сработало. Вот статья, которую я использовал в качестве ссылки, чтобы понять это.

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

обратите внимание на эту строку кода 

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

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

1 голос
/ 29 апреля 2010

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

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

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

1 голос
/ 19 апреля 2010

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

0 голосов
/ 24 сентября 2010

Тема уже отвечена, но я нашел это:

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

0 голосов
/ 28 апреля 2010

Я вижу, что в вашем коде 

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

.

Мобильные продукты Apple, за исключением ноутбука, не поддерживают флэш-память.

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

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

<!DOCTYPE html>

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

0 голосов
/ 19 апреля 2010

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

0 голосов
/ 18 апреля 2010

Следующий код работает на моем 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 .

...