Поведение видеоввода HTML5 на iPhone и iPod в веб-приложениях Safari

На iPhone и iPod, если видеоролик YouTube встроен в веб-страницу, пользователь может коснуться видео, и видео начнет воспроизводиться – мультимедийный проигрыватель iOS слайдов, а видео воспроизводится в полноэкранном режиме в альбомной ориентации. Как только видео закончит воспроизведение, мультимедийный проигрыватель iOS отскакивает назад, показывая веб-страницу, на которой было встроено видео.

Используя HTML5 , пользователь может коснуться видео, и видео будет «масштабироваться» на весь экран и начнет воспроизводиться независимо от текущей ориентации устройства. Как только видео закончит воспроизведение, пользователь должен нажать один раз, чтобы вызвать элементы управления проигрывателя, а затем нажмите «Готово», чтобы вернуться на веб-страницу.

К сожалению, загрузка моих видео на YouTube не является вариантом для этого приложения, и я не нашел видеоплеер HTML5, который возвращается на сайт после завершения видео. Я бы предпочел, чтобы видеоплеер проявлял то же поведение, что и встроенные видео YouTube, или видео воспроизводило встроенный. Форсирование встроенного видео возможно в настраиваемом UIWebView , но, к сожалению, это не вариант (поскольку это предназначено для веб-приложения, а не для собственного приложения). Кроме того, свойство свойство webkit-playsinline не работает.

Существуют ли какие-либо видеоплееры HTML5, которые могут воспроизводить встроенное видеоstreamи YouTube? Не хватает ли я очевидных обходных решений Javascript? Есть ли способ сообщить окну, что видео закончили играть без взаимодействия с пользователем?

РЕДАКТИРОВАТЬ:

Благодаря Яну, эта проблема решена. Далее следует рабочий код, а также список ошибок / заметок.

     scratchpad     document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false);    

Ошибки, которые я сделал:
1. Забыл добавить идентификатор в .
2. Тестирование для webkitSupportsFullscreen никогда не мог получить это свойство для проверки как «true». Комментарий в коде на этом форуме ,

 // note: .webkitSupportsFullscreen is false while the video is loading 

но мне не удалось создать условие, в котором оно вернулось.
3. Полностью пропустил этот пост stackoverflow .

Хм, я не могу попробовать это … но уверен, что вы это видели?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

Итак, «webkitEnterFullScreen ()» может быть вашим другом (хотя документ говорит о его только для чтения):

http://nathanbuskirk.com/?p=1

Встроенное видео невозможно на любом устройстве iOS рядом с iPad (до сих пор).

В любом случае, вы можете обнаружить конец видео в Javascript, используя прослушиватель событий:

 document.getElementById('video').addEventListener('ended',videoEndListener,false); 

Ура,

январь

Из документации Safari:

Важно: метод webkitEnterFullscreen () может быть вызван только в ответ на действие пользователя, например, нажатие кнопки. Вы не можете вызвать webkitEnterFullscreen () в ответ на событие onload (), например. ”

Это может объяснить, почему ваш webkitEnterFullscreen всегда неверен.

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13

Решение Jan, обрабатывающее событие «закончился», является лучшим в вашем случае.

  • Почему изменение порядка стекирования зависит от зависания фильтра webkit?
  • Добавление пользовательских заголовков в запросы ресурсов WebView - андроид
  • Как предотвратить изменение текста текста Webkit во время перехода CSS
  • Сокращение перехода CSS с несколькими свойствами?
  • css3 переход анимации при загрузке?
  • Chrome / Safari не заполняет 100% высоту гибкого родителя
  • iPhone WebKit CSS анимации вызывают мерцание
  • CSS-медиа-запрос для iPad и iPad?
  • Как создать импульсный эффект с использованием -webkit-animation - наружные кольца
  • css z-index потерян после преобразования webkit translate3d
  • Пользовательская панель прокрутки CSS для Firefox
  • Давайте будем гением компьютера.