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

Ответ 1

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

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

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

Ответ 2

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

По какой-то причине видео не будут воспроизводиться на iPad, если я не установил флаг control = "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>

Ответ 3

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

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

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

Возможно, вы захотите выполнить поиск в Интернете для "iphone mp4 byte-range".

Ответ 4

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

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

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

Ответ 5

Для будущих поисков, у меня был файл 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>

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

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

Ответ 6

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

Ответ 7

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

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

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

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

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

Для .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) в safari, вот работа, которую предоставляет apple. Заметьте, я еще не испытал это сам, и я не настолько счастлив с этим с первого взгляда, просто предоставляя дополнительную информацию.

Ссылка: "Возвратитесь к подключаемому модулю QuickTime. Существует простой способ вернуться к подключаемому модулю QuickTime, который работает почти для всех браузеров, - загрузите предварительно подготовленный файл JavaScript, предоставленный Apple, ac_quicktime.js, из примера HTML Video и включите его на вашей веб-странице, вставив следующую строку кода в 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 filetype: video/mov; "), пропустите ac_quicktime.js., затем будет работать в теге html video; Хакерди Хак.

Ответ 11

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

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

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

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

Ответ 12

Используя этот код, видео будет воспроизводиться во всех браузерах в сафари, а также с устройствами 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>

Ответ 13

Для 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>

Ответ 14

работает, но недавно 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 does not 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>

Ответ 15

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

Ответ 16

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

Ответ 17

Что помогло в моем случае - удалить звуковую дорожку. Он молчал раньше, но он должен был исчезнуть полностью.

В ubuntu:

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

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

Ответ 18

Для меня эта проблема вновь появилась с последним обновлением iOS. Видео тег, который работал, больше не работает. Он показывает только белый фон и кнопку воспроизведения, но никаких действий невозможно. У кого-нибудь есть проблемы с последним обновлением iOS (12.2)?

Ответ 19

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

Ответ 20

У меня была похожая проблема, когда видео внутри тега <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>

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

Ответ 21

Для моего варианта использования было две вещи:

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

о/