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

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

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

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

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

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

<video class="video-background" autoplay loop muted playsinline>

Работало только при включении playsinline.

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

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

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

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

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

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Ваш веб-сервер может не поддерживать запросы 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 handbrakeрепозиторий не включает поддержку MP4 из коробки. Я оставил настройки по умолчанию, удалил звуковую дорожку, и она сгенерировала файл * .M4V. Для тех, кому интересно, это один и тот же контейнер, но M4V в основном используется на iOS для открытия в iTunes.

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

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

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

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

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление "playinline" работает для меня на Iphone и Ipa, если вы не возражаете против отключения звука в вашем видео.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Если вы не хотите, чтобы ваше видео отключалось, но все же хотите, чтобы автовоспроизведение было, возможно, попробуйте удалить атрибут отключения звука с помощью js: Как включить звук html5-видео с отключенной опорой

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

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

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

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

Для .mp4 это работает (сафари для мобильных и настольных компьютеров):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

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

Ссылка: «Чтобы использовать аудио или видео HTML5, начните с создания элемента или, указав исходный URL-адрес для мультимедиа и включая атрибут управления. <video src="http://example.com/path/mymovie.mp4" controls></video>”

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

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

Итак, если (как и я) у вас возникла проблема .quicktime (или чего-то другого, кроме .mp4) в сафари , вот решение, предоставленное Apple. Обратите внимание: я еще не тестировал его сам, и я не очень доволен им с первого взгляда, просто предоставляю дополнительную информацию.

Ссылка: «Вернуться к подключаемому модулю QuickTime. Существует простой способ вернуться к подключаемому модулю QuickTime, который работает почти во всех браузерах, - загрузите предварительно созданный файл JavaScript, предоставленный Apple, ac_quicktime.js, из HTML Video Example и включите его на свою веб-страницу, вставив следующую строку кода в заголовок HTML: <script src="ac_quicktime.js" type="text/javascript"></script>"

Источник: 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 "data: video / mov;") пропустите ac_quicktime.js. . . тогда будет работать в теге html video; Hackerdy ​​Взлом.

Используя этот код, видео будет воспроизводиться во всех браузерах в сафари, а также на устройствах ios ... Сделайте это все (я использовал это и отлично работает)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

`

У меня была аналогичная проблема, когда видео внутри <video>тега воспроизводились только в Chrome и Firefox, но не в Safari. Вот что я сделал, чтобы это исправить ...

Я обнаружил странную уловку, заключающуюся в том, чтобы иметь две разные ссылки на ваше видео, одну в <video>теге для Chrome и Firefox, а другую в <img>теге для Safari. Интересный факт, видео действительно воспроизводятся в <img>тегах в Safari. После этого напишите простой скрипт, чтобы скрыть одно или другое при использовании определенного браузера. Так например:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

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

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

Для IOS используйте только исходный файл mp4. Я заметил одну проблему в последнем браузере Safari: браузер Safari не может правильно определить исходный файл, и из-за этого автовоспроизведение видео не работает.

Давайте проверим пример ниже -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Поскольку я использовал mp4, webm в исходных файлах. Safari deosnt поддерживает webm, но все еще в последней версии safari выбирает webm и не запускает автовоспроизведение видео.

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

Так что для сафари используйте ниже html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Для всех, кроме сафари,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

У меня была такая же проблема - убедитесь, что URL-адрес видеообъекта поступает из безопасного домена. Наша среда разработки - это http, а производство безопасно. Из-за того, что на видео ссылаются по относительному пути, оно не работало над разработкой. Кажется, проблема в том, что яблоко требует безопасности видео ...

работает, но у MacOs недавно появилась политика автозапуска для пользователя: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , я решил ту же проблему, используя кнопку для включения звука:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

Я столкнулся с той же проблемой. Потому что размер кадра моего видео был слишком большим. например, Apple поддерживает видео H.264 Baseline Profile Level 3.0 с разрешением до 640 x 480 пикселей и частотой 30 кадров в секунду. Обратите внимание, что B-кадры не поддерживаются в базовом профиле. проверьте это для получения дополнительной информации

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

В Ubuntu:

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

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

В моем случае было две вещи :

1. Я не использовал новую политику атрибута / webkit playsinline ;
2. Мое видео / пантомима или какая - то оболочка неправильно закодированы, поэтому я использовал этот сайт, чтобы преобразовать его во все нужные мне форматы: https://pt.converterpoint.com/

о /

У меня была точно такая же проблема, мой HTML-тег видео хорошо воспроизводился в Chrome и Mozilla, в Safari - элементы управления появлялись, но видео было пустым. Я пытался поиграть со всеми вышеперечисленными атрибутами, удалить / добавить отключение звука, playsInline и т. Д., И ничего не получилось. Проблема была и с серверами, как описано здесь. У меня было такое - НЕ РАБОТАЛО:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

и я просто переместил свое видео во внешнюю библиотеку, и теперь у меня все в порядке с Safari, он РАБОТАЕТ хорошо:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

У меня ничего не работало, кроме сжатия видео до 30 МБ. Это помогло, но с очень плохим сжатием.

Если у кого-то возникла такая же проблема, я решил ее, включив поддержку байтового диапазона на моем сервере. Похоже, что Safari требует запросов диапазона байтов. В моем случае я использую NGINX, и мне пришлось добавить proxy_force_ranges on;в свой файл конфигурации. Благодаря этому ответу !

Если вы используете REACT, playsInlineэто работает на всех устройствах IOS