Проблема с видео в Safari iOS 15

#html #ios #iphone #ios15

Вопрос:

С тех пор как я загрузил iOS 15, видео на моей странице больше не работает (в Safari). Я использовал следующий код для встраивания видео.

 <video id="video" autoplay="true" loop="true" muted="true" playsinline="true">
    <source src="media/video.mp4" type="video/mp4">
</video>

Если я деактивирую «Процесс GPU: Мультимедиа» в настройках Safari, все будет работать так же, как и раньше.

Нужно ли мне вставлять видео по-другому?

1. Похоже, это проблема и с Safari 15 в iPadOS и macOS. Мне удалось исправить это в моем случае, перезагрузив видео src, но мне интересно знать, почему эта проблема возникает в первую очередь.

Ответ №1:

Просто заверните video бирку div . Я предполагаю, что вы разместили свой video тег absolute или fixed . Похоже, в этом есть какая-то ошибка. Расположение обертки div fixed / absolute вместо video элемента, по-видимому, помогает. Это также может помочь придать видеоэлементу a background-color .

Ответ №2:

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

    const rVideo = document.getElementById("videoElement");
    if (rVideo) {
      rVideo.pause();
      rVideo
        .play()
        .then((res) => {
          console.log("playing start", res);
        })
        .catch((err) => {
          console.log("error playing", err);
        });
    }

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

Ответ №3:

Вы можете исправить черный экран, используя setTimeout следующее:

 this.video.pause();
setTimeout(() => {
    this.video.play().then((res) => {
        console.log("playing start", res);
    })
    .catch((err) => {
        console.log("error playing", err);
    });
}, 0);

Ответ №4:

Чтобы видео правильно отображалось на устройствах iOS, его необходимо хотя бы частично запрашивать, как указано Apple. Поэтому «поддержка диапазона байтов» должна быть включена на сервере, на котором они размещены: https://discussions.apple.com/thread/4119538?page=2

Из-за большого количества жалоб на то, что iPhone не может воспроизводить некоторые подкасты, Apple теперь требует, чтобы на сервере, на котором вы размещаете свои медиафайлы, была включена поддержка диапазона байтов — в основном это означает одновременное выполнение запросов только на часть файла, что требуется для iPhone. Вы должны подтвердить в своей службе хостинга, что они поддерживают это: если они этого не делают (или не знают, что это такое), вам следует найти другую службу хостинга.

Также, если вы используете Cloudflare в качестве службы CDN, и на сервере включено сжатие gzip, заголовок «Диапазоны приема» не пересылается Cloudflare, и видео не обслуживаются должным образом: https://community.cloudflare.com/t/accept-ranges-and-content-length-headers-not-forwarded-by-cloudflare/41445/4

Поэтому есть два решения:

Полностью отключите сжатие gzip на сервере.
Включите сжатие gzip на сервере и добавьте SetEnvIfNoCase Request_URI .mp4$ no-gzip dont-vary## Heading ## в файл .htaccess, чтобы не сжимать файлы .mp4. Решение применимо для любого видеоформата.