HTML5 Video tag не работает в Safari, iPhone и iPad

Я пытаюсь создать веб-страницу html5, в которой есть небольшое видео, например 13, я преобразовал флеш-версию этого видео в 3-х формат: .ogv, используя fireFogg, .webm, используя firefogg, и .mp4, используя приложение HandBrake, html-скрипт Я использовал на своей странице:

 

Видео отлично работает в Chrome и FireFox, но не работает ни в Safari на рабочем столе, ни на iPhone или iPad, выход – это просто пустая страница с элементами управления тегом видео, но ничего не загружено

Обратите внимание, что версия Safari, которая поддерживает HTML5-видео

Еще одно возможное решение для будущих поисковиков: (Если ваша проблема не проблема с миметикой).

По какой-то причине видео не будут воспроизводиться на iPad, если я не установил флаг = true.

Пример: это работало для меня на iPhone, но не на iPad.

  

И теперь это работает как на iPad, так и на iPhone:

  

Ваш веб-сервер может не поддерживать HTTP-запросы на байты. Это касается веб-сервера, который я использую, и результат заключается в том, что виджет видео загружается и появляется кнопка воспроизведения, но нажатие кнопки не влияет. – Видео работает в FF и Chrome, но не в iPhone или iPad.

Подробнее читайте здесь на mobiforge.com о байтовых запросах, в Приложении A: Потоковая передача для Apple iPhone :

Во-первых, веб-браузер Safari запрашивает контент, и если это аудио- или видеофайл, он открывает медиаплеер. Затем медиаплеер запрашивает первые 2 байта содержимого, чтобы гарантировать, что веб-сервер поддерживает байтовые запросы. Затем, если он их поддерживает, медиаплеер iPhone запрашивает остальную часть контента по байтовым диапазонам и воспроизводит его.

Вы можете искать в Интернете «iphone mp4 byte-range».

Если ваши видео защищены системой входа в систему на основе сеанса, Safari не сможет их загрузить. Это связано с тем, что Safari делает первоначальный запрос для видео, а затем передает задачу QuickTime, что делает другой запрос. Поскольку Safari содержит информацию о сеансе, он будет проходить аутентификацию, но QuickTime не будет.

Вы можете увидеть это, если вы просмотрите журнал доступа к серверу … сначала запрос из Safari, затем запрос из QuickTime. Другие браузеры просто делают один запрос из самого браузера.

Если это ваша проблема, возможно, вам придется переработать доступ к видео, чтобы использовать временные токены или ограниченный доступ времени от исходного запроса. Я обновлю этот ответ, если найду более прямое решение.

Для будущих поисков у меня был файл mp4, который я уменьшил с помощью Handbrake с помощью handbrake-gtk из apt-get , например sudo apt-get install handbrake-gtk . В Ubuntu 14.04 repository handbrake не включает поддержку MP4 из коробки. Я оставил настройки по умолчанию, удалил звуковую дорожку и создал файл * .M4V. Для тех, кто задается вопросом, они представляют собой один и тот же контейнер, но M4V в основном используется на iOS для открытия в iTunes.

Это работало во всех браузерах, кроме Safari:

  

Я изменил тип mime между video/mp4 и video/m4v без эффекта. Я также тестировал добавление атрибута control и снова, никакого эффекта.

Это работало во всех проверенных браузерах, включая Safari 7 на Mavericks и Safari 8 на Yosemite. Я просто переименовал один и тот же файл m4v (фактический файл, а не только HTML) в mp4 и перезагрузился на наш CDN:

  

Safari, я думаю, полностью ожидает фактически названный MP4. Никакие другие комбинации файлов и mime-type не работали для меня. Я думаю, что другие браузеры сначала выбирают файл WEBM, особенно Chrome, хотя я уверен, что исходный список должен выбрать первый источник, который технически поддерживается.

Это, однако, не зафиксировало проблему с видео на устройствах iOS (iPad 3 «новый iPad» и iPhone 6).

Я обнаружил, что, хотя Safari поддерживает HTML5 Video, Quicktime Player должен быть установлен, чтобы это работало. На сайте, который я построил, который использует HTML5 Video, пользователь получает предупреждение при использовании Safari, говоря им, что у них должно быть установлено Quicktime, иначе они смогут видеть только видео-стенограммы. Надеюсь это поможет.

Я видел странные проблемы с несертифицированными SSL-сертификатами разработки, в которых мобильный Safari будет с радостью обслуживать вашу страницу, но отказывается показывать видео на «поддельный» SSL-сертификат, даже если вы приняли сертификат.

Чтобы проверить, вы можете развернуть видео в другом месте – или переключиться на http (для всей страницы), и он должен играть.

Начиная с iOS 6.1, больше нет возможности автоматически воспроизводить видео на iPad. Согласно документации Apple, функция автозапуска не работает на Safari на всех устройствах ios, включая iPad:

«Apple приняла решение отключить автоматическое воспроизведение видео на устройствах iOS через реализацию сценариев и атрибутов.

В Safari на iOS (для всех устройств, включая iPad), где пользователь может находиться в сотовой сети и заряжаться на каждый блок данных, предварительная загрузка и автоматическое воспроизведение отключены. Никакие данные не загружаются до тех пор, пока пользователь не инициирует его.

Вы можете прочитать больше в этой документации Apple

Просто добавьте muted атрибут, и все будет работать нормально.

Источник этого ответа находится здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

По умолчанию WebKit будет иметь следующие политики:

Элементы теперь будут соблюдать атрибут autoplay для элементов, которые удовлетворяют следующим условиям:

  • Элементы будут разрешены для автовоспроизведения без жестов пользователя, если их исходный носитель не содержит звуковых дорожек.
  • Элементы также будут разрешены для автовоспроизведения без жестов пользователя.
  • Если элемент получает звуковую дорожку или отключается без жестов пользователя, воспроизведение приостанавливается.
  • Элементы только начинают воспроизводиться, когда они видны на экране, например, когда они прокручиваются в область просмотра, становятся видимыми через CSS и вставляются в DOM.
  • Элементы будут останавливаться, если они станут невидимыми, например, прокручиваясь из windows просмотра.

Элементы теперь будут соблюдать метод play () для элементов, которые удовлетворяют следующим условиям:

  • Элементы будут разрешены для воспроизведения () без жестов пользователя, если их исходный носитель не содержит звуковых дорожек или если для их приглушенного свойства установлено значение true.
  • Если элемент получает звуковую дорожку или отключается без жестов пользователя, воспроизведение приостанавливается.
  • Элементы будут разрешены к воспроизведению (), если они не видны на экране или не отображаются в окне просмотра.
  • video.play () вернет promise, которое будет отклонено, если какое-либо из этих условий не будет выполнено.

На iPhone элементы теперь будут разрешены для воспроизведения inline и не будут автоматически вводить полноэкранный режим при начале воспроизведения. Элементы без атрибутов playinline будут по-прежнему нуждаться в полноэкранном режиме для воспроизведения на iPhone. При выходе из полноэкранного режима с жесткой щекой элементы без playinline будут продолжать играть inline.

Для .mp4 это работает (safari для мобильных и настольных):

  

controls=”true” упомянутые в вышеприведенном сообщении, не имеют для меня никакого значения, поскольку Apple говорит, что просто использует элементы управления самостоятельно.

Ссылка: «Чтобы использовать аудио или видео HTML5, начните с создания или элемента, указав URL-адрес источника для носителя и включающий атрибут элементов управления.

Источник: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

В моих отношениях (небольшое отступление) : я обнаружил, что загрузка видео с iPhone отправляет его на сервер как .quicktime. По иронии судьбы, это проблема при попытке воспроизвести видео с сервера на safari. (мобильный и рабочий стол).

Так что, если (как и я) вы испытываете проблему .quicktime (или что-то другое, кроме .mp4) в safari , вот работа, которую предлагает яблоко. Заметьте, я еще не испытал это сам, и я не настолько доволен этим с первого взгляда, просто предоставляя больше информации.

Ссылка: «Возвратитесь к подключаемому модулю QuickTime. Существует простой способ вернуться к подключаемому модулю QuickTime, который работает почти для всех браузеров, – загрузите предварительно подготовленный файл JavaScript, предоставленный Apple, ac_quicktime.js, из примера HTML Video и включите его на свою веб-страницу, вставив следующую строку кода в HTML- :

Источник: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Обновление: для .quicktime переименуйте в .mov перед отправкой на сервер (в файле base64 filetype: video / mov; “), пропустите ac_quicktime.js. , , затем будет работать в теге html video; Хакерди Хак.

Я столкнулся с такой же проблемой. Потому что размер моего видеоfragmentа слишком велик. ie.2248 px apple support H.264 Базовый уровень профиля 3.0 видео, до 640 x 480 при 30 кадрах в секунду. Обратите внимание: B-frameworks не поддерживаются в профиле базовой линии. проверьте это для получения дополнительной информации

У меня была эта проблема, когда воспроизведение .mp4 в Safari не работало, но в других браузерах все было в порядке. Ошибка, которую я видел в консоли: ошибка media src не поддерживается. В моем случае это оказалось проблемой типа MIME, но не потому, что он не был объявлен как тип MIME в IIS, а скорее был объявлен дважды (один раз в IIS, а также в файле web.config). Я нашел это, пытаясь загрузить файл .mp4 локально на сервере. Я удалил файл конфигурации из местоположения содержимого, которое пытался воспроизвести, и устранил проблему. Я мог бы просто удалить MIME-тип из файла web.config, но в этом случае файл web.config не нужен.

То, что помогло в моем случае, – это падение звуковой дорожки. Раньше молчал, но он должен был исчезнуть полностью.

На ubuntu:

 ffmpeg -i input.mp4 -vcodec copy -an output.mp4 

И safari / рабочий стол начинают воспроизводить видео

У меня была такая же проблема с яблочными устройствами, как iPhone и iPad, я отключил режим низкой мощности, и он работал, и вы также должны включить атрибут playinline в тег видео, как это

  
  • Как отключить ссылку на номер телефона в Mobile Safari?
  • Различать Chrome из Safari с помощью jQuery.browser
  • Как заставить Safari выполнять полную перезагрузку страницы, не используя мышь?
  • Программно воспроизводить видео со звуком в Safari и Mobile Chrome
  • Похоже, что Firefox и Safari на Mac не могут показать веб-страницу в полноэкранном режиме?
  • Запретить скрытие адресной строки в мобильных браузерах
  • Как заставить WebKit перерисовывать / перерисовывать для распространения изменений стиля?
  • Как удалить выделение границы в текстовом элементе ввода
  • Как перенести содержимое моего портативного Firefox в установленный Firefox на моем ноутбуке?
  • Множественный выбор в Safari iOS 7
  • Создание файла из blob
  • Давайте будем гением компьютера.