Подтвердить что ты не робот

Почему Safari на iOS не показывает мой плакат с видео в формате HTML5?

У меня есть эта страница:
http://healthpad.net/dashboard/
На нем есть 10 <video> элементов.

По какой-то причине, когда я загружаю страницу на iPad, она не показывает видео-плакаты.

Попробуйте следующее:

  • загрузить страницу в браузере рабочего стола
  • загрузите его на iPad или iPad, и вы получите большой черный ящик с кнопкой воспроизведения.

image

скажите, пожалуйста, почему это происходит?

Вот что я уже исключил:

Заголовок Content-Type.
Я подтвердил правильность установки заголовка содержимого содержимого изображения. В приведенном выше примере заголовок Content-Type правильно image/jpeg.

Вмешательство в библиотеку video.js
VideoJs используется для показа этой симпатичной кнопки воспроизведения в настольных браузерах и для настройки элементов управления. Однако эта библиотека не мешает основному проигрывателю. Просто чтобы убедиться, что я создал тестовую видеостраницу, у которой нет класса video-js, поэтому библиотека не подбирает и обрабатывает это видео. Фактически, на тестовой странице нет даже никакой JS-библиотеки, она просто

<html><body>
    <video
        controls
        height="400"
        width="600"
        poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
        src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
    ></video>
</body></html>

http://healthpad.net/rj_templates/test/zzz/

Использование любых атрибутов видео, которые могут не поддерживаться на Mobile Safari
На вышеприведенной тестовой странице есть простой тег видео. Я попытался удалить все остальные атрибуты, кроме src и poster, это не помогло.

Большинство вопросов StackOverflow по теме просто говорят "Перезапустите iPad"

Здесь, где это странно:

Если вы об этом поработали, ответы на StackOverflow, которые были приняты, часто говорят "Перезапустите iPad, который сделал это для меня".

Итак, я пробовал делать то же самое, сначала я просто сказал, что это не работает в моем случае.

Затем я попробовал это:
(все следующие на симуляторе iPad)

  • Перейти на сайт, видео-плакаты не отображаются
  • Перейдите на тестовую страницу (http://healthpad.net/rj_templates/test/zzz/), видеоплакат не отображается.
  • Нажмите "домой", чтобы выйти из Safari (или Cmd + Shift + H mac shortcut для симулятора).
  • Дважды нажмите кнопку "Дом", чтобы получить переключатель задач за пределами Safari, коснитесь и удерживайте значок сафари, пока не появится кнопка kill.
  • Убить Safari
  • Открыть сафари (перезапущен). На этом этапе, если вы загрузите тестовую страницу (одну с одним видео), появится плакат.
  • Теперь перейдите на страницу с несколькими видео: (http://healthpad.net/dashboard/). Видео-плакаты не отображаются.
  • Вернитесь к тестовой странице с одним видео, видео-плакат для этого уже не работает.
  • Повторите шаги с 3 по 8, чтобы увидеть процесс прекращения работы видеоплакатов.

По-видимому, в какой-то момент Mobile Safari решит, что больше не будет показывать видео-плакаты. Кроме того, по-видимому, мой сайт запускает это условие.

Разъяснения:

Когда плакаты больше не работают, это происходит не только на одном домене, ни видео-плакаты не будут загружены ни для какого другого сайта, независимо от того, находится ли он в совершенно другом домене (например, демонстрационное видео из http://www.videojs.com/).

Для reset это поведение, из того, что я видел, вам нужно убить и перезапустить Safari. Просто закрытие и повторное открытие не означает reset этого состояния.

Кто-нибудь знает, почему это происходит? Есть ли способ обойти это?

4b9b3361

Ответ 1

Я получил эту работу, используя PNG вместо JPG.

Странно, что JPG работал в iOS Safari локально (через сервер POW на локальном Wi-Fi), но при нажатии на установку изображения плаката не загружалось. Как локальный, так и промежуточный код ссылались на один и тот же файл на S3.

Изменен формат файла в PNG и он загружается нормально.

Ответ 2

Я вижу, что вопрос постоянно поднимается, хотя ответа нет. Итак, вот что я сделал:

На iOS вместо показа видеопроигрывателя (даже с autoload=false) я просто покажу плакат и кнопку воспроизведения, два автономных тега <img>. Когда их щелкают, я создаю видеоплеер из javascript и говорю ему, чтобы он играл. Хорошо работает, пользователи не видят большой разницы.

Ответ 3

В настройках Safari [iOS7] Блокирование всплывающих окон, показанное "OFF", казалось, вылечило это для меня, надеюсь, что это поможет.