Я пытаюсь создать веб-страницу html5, в которой есть небольшое видео, например 13, я преобразовал флеш-версию этого видео в 3 формат:.ogv, используя fireFogg,.webm, используя firefogg, и .mp4, используя приложение HandBrake html script, который я использовал на моей странице:
<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-видео
playsinline в тег видео:<video class="video-background" autoplay loop muted playsinline>
playsinline только при включении playsinline.
Еще одно возможное решение для будущих поисковиков: (Если ваша проблема не проблема с миметикой.)
По какой-то причине видео не будут воспроизводиться на 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>
Ваш веб-сервер может не поддерживать HTTP-байтовые запросы. Это касается веб-сервера, который я использую, и результат заключается в том, что виджет видео загружается и появляется кнопка воспроизведения, но нажатие кнопки не влияет. - Видео работает в FF и Chrome, но не в iPhone и iPad.
Подробнее о здесь, на mobiforge.com о байтовых запросах, в Приложении A: Потоковая передача для Apple iPhone:
Сначала веб-браузер Safari запрашивает контент, и если он аудио или видео, он открывает медиаплеер. Затем медиаплеер запрашивает первые 2 байта содержимого, чтобы гарантировать, что Webserver поддерживает байтовые запросы. Затем, если он поддерживает их, Медиаплеер 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>
Я изменил тип 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).
Я обнаружил, что, хотя Safari поддерживает HTML5 Video, Quicktime Player должен быть установлен, чтобы это работало. На сайте, который я построил, который использует HTML5 Video, пользователь получает предупреждение при использовании Safari, говоря им, что у них должно быть установлено Quicktime, иначе они смогут видеть только видео-стенограммы. Надеюсь, это поможет.
Просто добавьте атрибут 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.
Я видел странные проблемы с несертифицированными SSL-сертификатами разработки, в которых мобильный Safari будет с радостью обслуживать вашу страницу, но отказывается показывать видео на "поддельный" SSL-сертификат, даже если вы приняли сертификат.
Чтобы проверить, вы можете развернуть видео в другом месте - или переключиться на http (для всей страницы), и он должен играть.
Добавление "playinline" работает для меня на Iphone и Ipa, если вы не против, чтобы ваше видео отключилось.
<video muted playsinline>
<source src="..." type="video/mp4">
</video>
Если вы не хотите, чтобы ваше видео отключилось, но все равно хотите автовоспроизведение, возможно, попробуйте удалить отключенный атрибут с помощью js: Как отключить видео html5 с отключенной поддержкой
Для .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> "
В моих отношениях (небольшое отступление): Я обнаружил, что загрузка видео с 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>"
Обновление: для .quicktime переименуйте .mov перед отправкой на сервер (в файле base64 filetype: video/mov; "), пропустите ac_quicktime.js., затем будет работать в теге html video; Хакерди Хак.
Начиная с iOS 6.1, больше нет возможности автоматически воспроизводить видео на iPad. Согласно документации Apple, функция автозапуска не работает на Safari во всех устройствах ios, включая iPad:
"Apple решила отключить автоматическое воспроизведение видео на устройствах iOS с помощью как script, так и реализации атрибутов.
В Safari на iOS (для всех устройств, включая iPad), где пользователь может находиться в сотовой сети и заряжаться на каждый блок данных, предварительная загрузка и автоматическое воспроизведение отключены. "
Вы можете прочитать больше в этой документации Apple
Используя этот код, видео будет воспроизводиться во всех браузерах в сафари, а также с устройствами 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>Для 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>
работает, но недавно 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>Я столкнулся с такой же проблемой. Потому что размер моего видеофрагмента слишком велик. т.е. 2448 пикселей поддержка яблока H.264 Baseline Profile Level 3.0 видео, до 640 x 480 при 30 кадрах в секунду. Обратите внимание: B-рамки не поддерживаются в профиле базовой линии. проверьте это для получения дополнительной информации
У меня была эта проблема, когда воспроизведение .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
И сафари/рабочий стол начнут проигрывать видео
Для меня эта проблема вновь появилась с последним обновлением iOS. Видео тег, который работал, больше не работает. Он показывает только белый фон и кнопку воспроизведения, но никаких действий невозможно. У кого-нибудь есть проблемы с последним обновлением iOS (12.2)?
У меня была такая же проблема - убедитесь, что URL-адрес видео актива поступает из защищенного домена. Наша среда разработки - http, а производство - безопасно. Из-за того, что на видео ссылаются по относительному пути, оно не работает над разработкой. Кажется, проблема в том, что для безопасности Apple требуется видео...
У меня была похожая проблема, когда видео внутри тега <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>
Это также помогает решить проблему тонкой черной рамки/рамки на некоторых видео в некоторых браузерах, где они отображаются неправильно.
Для моего варианта использования было две вещи:
playsinline;о/