GWT & HTML5 Видео в мобильном Safari
Я пытаюсь кодировать сайт в GWT, который играет видео с HTML5. Все работает отлично на рабочем столе, но мобильный Safari и на iPhone и на iPad не играет видео.
Я могу играть видео с помощью Видео для Всех. Я даже скопировал код в свою собственную простую страницу HTML, и это работает безупречно. Если я вручу тот же самый код через виджет GWT, то мобильное сафари не будет играть видео. На iPhone I видят серое поле с запрещающим знаком вокруг кнопки воспроизведения, и на iPad это обнаруживается как черный квадрат.
Я удостоверился, что мой doctype , но я не знаю, где еще начать отлаживать. Возможно, это это, потому что код введен с помощью JavaScript? Любые указатели на том, где начать смотреть, значительно ценились бы.
Вот точный код, который я использую для видео:
Править:
Я скопировал источник, который отображался на моем iPhone/iPad с помощью этого bookmarklet. Я затем скопировал тот код в простую страницу HTML, которая работает безупречно. Это должно иметь некоторое отношение к видео тегу, сгенерированному с помощью JavaScript. (Т.Е. Я нажимаю на кнопку, и видео тег сгенерирован без обновления страницы.)
Я не уверен, является ли проблемой мобильное сафари, или GWT JavaScript генерирует, но так или иначе я должен буду найти обходное решение.
РЕДАКТИРОВАНИЕ (7/23/10):
Я возвратился и пересмотрел проблему. Так как я отправил вопрос, я полностью изменил расположение страницы для использования LayoutPanels вместо панелей DockPanels и Vertical/Horizontal. Я также обновил до GWT 2.0.4. Используя iPad с iOS 3.2.1 это все еще не играет видео, но я действительно получаю кадр плаката, когда я указываю его (то же как прежде). С iPhone 4 и iOS 4.0.1, видео играет без проблемы. Таким образом, это похоже на то, что проблема, это фиксируется с iOS 4.
6 ответов
Следующий код работает на моем 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 .
GXT - неправильное решение. Вы должны определить, что ваш браузер поддерживает сафари для мобильных устройств. посмотрите, как правильно обнаруживать мобильные браузеры в GWT , а затем создать виджет, который обертывает тег видео.
Для поддержки других функций HTML5 вы также можете ознакомиться с проектом GWT-Mobile-Webkit .
Как я уже говорил ранее в моем комментарии от 21 апреля, iPhone, iPad и все такое ... не поддерживают Flash и никогда не будут его поддерживать. Но iPhone OS 3.0 поддерживает теги видео HTML5, о чем вы можете прочитать в этой статье и см. это один
AKAMAI - поставщик видео, а страница iPhone использует тег видео HTML5.
iPhone поддерживает только видео в формате mp4 или аудиофайлы AAC.
Я вижу, в вашем коде есть
<object width="640" height="384" type="application/x-shockwave-flash"
.
Мобильные продукты Apple без ноутбука не поддерживают вспышку.
(это самая глупая вещь, которую я когда-либо видел, держу пари, что Apple собирается запретить использование воздуха и воды в следующем лицензионном соглашении.)
Также попробуйте:
<!DOCTYPE html>
, если вы используете html 5
{ {1}}Хорошо, я тоже пытался понять это. Я могу заставить видео 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/
EDIT
Еще одна ссылка, эта полностью помогла мне разобраться в моей проблеме. Посмотрите, как мы используем nginx и unicorn для запуска нашего сайта Rails. К сожалению, nginx не поддерживает запросы байтового диапазона, но apache поддерживает. Я протестировал это на Apache, и это сработало. Вот статья, которую я использовал в качестве справки, чтобы понять это.
обратите внимание на эту строку кода
curl --range 0-99 http://example.com/test.mov -o /dev/null
Вы можете использовать это, чтобы узнать, можно ли использовать ваш сервер поддерживает запросы байтового диапазона.