Я пытаюсь создать веб-страницу 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.
iphone
ipad
safari
html5-video
mobile-safari
Халед Аль Хаге Исмаил
источник
источник
autoplay
: developer.apple.com/library/safari/documentation/AudioVideo/… ..playsinline
в теге видео?Ответы:
У меня была такая же проблема с устройствами Apple, такими как iPhone и iPad, я отключил режим низкого энергопотребления, и он сработал, и вы также должны включить
playsinline
атрибут в тег видео следующим образом:<video class="video-background" autoplay loop muted playsinline>
Работало только при включении
playsinline
.источник
playsInline
в camelCase.Другое возможное решение для будущих искателей: (Если ваша проблема не связана с 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>
источник
autoplay
опции сработало. У меняcontrols="false"
в коде.controls="false"
;controls
сам по себе является логическим, которое, когда присутствует, включает элементы управления, а когда отсутствует, элементы управления отсутствуют. См W3C спецификацииcontrols
это логический атрибут, единственными допустимыми значениями являются none, пустая строка или собственное имя. Истинные и ложные значения неверны.Ваш веб-сервер может не поддерживать запросы HTTP-диапазона байтов. Так обстоит дело с веб-сервером, который я использую, и в результате загружается виджет видео и появляется кнопка воспроизведения, но нажатие кнопки не имеет никакого эффекта. - Видео работает в FF и Chrome, но не в iPhone или iPad.
Подробнее о запросах байтового диапазона читайте здесь, на mobiforge.com , в Приложении A: Стриминг для Apple iPhone :
Вы можете поискать в Интернете по запросу «iphone mp4 byte-range».
источник
RangeResult.ofPath(finalPath, range, Some(mime))
и должен работать 2.7 и выше.Если ваши видео защищены системой входа в систему на основе сеансов, Safari не сможет их загрузить. Это связано с тем, что Safari делает первоначальный запрос видео, а затем передает задачу QuickTime, который выполняет другой запрос. Поскольку Safari хранит информацию о сеансе, он пройдет аутентификацию, а QuickTime - нет.
Вы можете убедиться в этом, если просмотрите журнал доступа к серверу ... сначала запрос от Safari, затем запрос от QuickTime. Другие браузеры просто делают один запрос от самого браузера.
Если это ваша проблема, возможно, вам придется переделать доступ к видео, чтобы использовать временные токены или ограниченный по времени доступ из исходного запроса. Я обновлю этот ответ, если найду более прямое решение.
источник
Для поиска в будущем, а я имел mp4 файл , который я отмастшабированный с Handbrake , используя
handbrake-gtk
изapt-get
, напримерsudo apt-get install handbrake-gtk
. В Ubuntu 14.04handbrake
репозиторий не включает поддержку 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/
источник
Я обнаружил, что, хотя 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
И сафари / рабочий стол начать воспроизведение видео
источник
В моем случае было две вещи :
playsinline
;о /
источник
У меня была точно такая же проблема, мой 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источник