У меня какая-то странная проблема. Я пытаюсь создать сайт с зацикленным фоновым видео. Код выглядит так:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
& Лт;!- конец фрагмента - >
Это прекрасно работает в большинстве браузеров (IE борется с этой подходящей вещью, но я не против), но на iPhone видео не будет автоматически воспроизводиться, но на iPad это происходит. Я уже прочитал Новое < video > Политики для iOS, и я думаю, что я отвечаю требованиям (в противном случае iPad не будет автоматически запускаться). Я сделал еще один тест:
Я делаю это неправильно или iPhone просто не будет автоматически воспроизводить видео и всегда требует взаимодействия? Меня волнует только iOS 10, я знаю, что требования к iOS 9 были другими
Помогает ли атрибут 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/
iOs 10+ позволяют встроенному видео-автоплайу. но вы должны отключить «Режим низкого питания» на вашем iPhone.
Вот небольшой взлом, чтобы преодолеть всю борьбу за автозагрузку видео на сайте:
Примечание. Некоторые браузеры не позволяют автоматически воспроизводить видео, если пользователь не взаимодействует с устройством.
Таким образом, сценарии, чтобы проверить, воспроизводится ли видео:
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 очень прост, и его необходимо добавлять в тег видео, отличный от этих сценариев.
Вы можете увидеть рабочий пример с кодом здесь по этой ссылке: