У меня какая-то странная проблема. Я пытаюсь создать веб-сайт с зацикленным фоном. Код выглядит следующим образом:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>Автозапуск видео HTML5 на iPhone
Ответ 1
Помогает ли атрибут playsinline?
Вот что у меня есть:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
Смотрите комментарий на playsinline здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/
Ответ 2
iOS 10+ позволяют встроить видео автовоспроизведение. но вы должны отключить режим "Низкий уровень мощности" на вашем iPhone.
Ответ 3
Если вы используете React, обратите внимание, что атрибут playsinline должен быть записан в camelCase: playsInline.
Иначе это не сработает.
Ответ 4
Вот небольшой взлом, чтобы преодолеть все трудности, с которыми вы сталкиваетесь при автопроигрывании видео на сайте:
1) Проверьте, воспроизводится ли видео или нет. 2) Запустить воспроизведение видео по событию, например по щелчку тела или касанию.
Примечание. Некоторые браузеры не позволяют автоматически воспроизводить видео, если пользователь не взаимодействует с устройством.
Итак, скрипты для проверки того, воспроизводится ли видео:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
А затем вы можете просто воспроизвести видео, подключив слушателей событий к телу:
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
Примечание. Атрибут autoplay - это базовый атрибут, который необходимо добавить к тегу video уже, кроме этих сценариев.
Вы можете увидеть рабочий пример с кодом здесь по этой ссылке: