Поведение проигрывателя HTML5 на iPhone и iPod в Safari Web Apps - PullRequest
Новая
       30

Поведение проигрывателя HTML5 на iPhone и iPod в Safari Web Apps

14 голосов
/ 26 марта 2011

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

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

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

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

EDIT:

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>scratchpad</title>
</head>
<body>
<video id="video">
    <source src="movie.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false);
</script>
</body>
</html>

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

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

но мне не удалось создать условие, при котором возвращалось значение true.
3. Полностью пропущен этот стековый пост .

Ответы [ 2 ]

9 голосов
/ 26 марта 2011

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

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);

Cheers,

Jan

1 голос
/ 01 февраля 2012

Из документации 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

Решение Яна для обработки события «закончилась» является лучшим в вашем случае.

...