HTML5 Video Fullscreen не работает на iPad - PullRequest
Новая
       12

HTML5 Video Fullscreen не работает на iPad

5 голосов
/ 23 августа 2011

У меня есть видеопоток html5.Я использую пользовательские элементы управления и привязываю к ним действия с помощью jQuery.Одним из упомянутых элементов управления является полноэкранная кнопка, которая вызывает video.webkitEnterFullScreen ().Когда я проверяю это в Safari, полноэкранный режим работает нормально.Когда я пытаюсь это сделать на iPad, это не получается.Что дает?

Вот как я объявляю свое видео в html: 

<video preload="true" width="720" height="405"></video>

Вот объявление моей полноэкранной кнопки: 

<a href="javascript:;" class="fullscreen">
     <span class="icon"></span>
</a>

Вот как япривязать кнопку к действию: 

var video = $('video')[0];
$('body').find('.fullscreen').click(function(){
     video.webkitEnterFullscreen();
});

$('body').find('.fullscreen .icon').click(function(){
     video.webkitEnterFullscreen();
});

Опять же, это работает в сафари, но не на ipad.Когда они включают предупреждения и записи операторов в объявление функции, они появляются, что означает, что мои клики были зарегистрированы на ipad, но видео не переходит в полноэкранный режим.Помогите!

ОБНОВЛЕНИЕ: Просто, чтобы прояснить мою проблему, у меня нет проблем с воспроизведением.Видео воспроизводится как на рабочем столе Safari, так и в Safari для iPad.В safari для рабочего стола полноэкранный режим работает, но в safari для ipad полноэкранный режим не работает.

Ответы [ 3 ]

1 голос
/ 19 сентября 2012

Плохие новости извините ... Пока iPad не поддерживает webkitEnterFullscreen. Хорошая новость заключается в том, что спецификации были разработаны здесь: http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

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

0 голосов
/ 25 августа 2011

Итак, после кропотливой утомительной отладки я обнаружил причину своей проблемы.Я просмотрел все свои правила CSS, которые мог унаследовать игрок, и переключил их (закомментировал, а затем вернулся), чтобы посмотреть, какой эффект это даст.Наконец я нашел виновника.Div, на котором находится мое видео, изначально имеет класс css, у которого есть правило «видимость: скрытый».Когда пользователь нажимает кнопку на странице, jQuery запускает команду, чтобы изменить это правило со «скрытого» на «видимое».Удаление правила «видимость: скрытый» из исходного класса CSS позволило мне на весь экран на Ipad.Теперь я могу работать в полноэкранном режиме на ipad, но дизайн моего проекта не работает, но это вопрос для другого поста.Я надеюсь, что это помогает кому-то еще в подобной ситуации.

0 голосов
/ 23 августа 2011

Одна вещь, хотя я не уверен, что это имеет здесь значение, но preload="true" больше не действителен.preload может быть установлено на одно из: metadata, none или auto (что, вероятно, и установлено здесь).

Возможно, iPad auto по умолчанию не загружается предварительночто-нибудь, так что, возможно, попробуйте установить его на metadata?

Проверьте это тоже.

...