Видео HTML5 воспроизводится в MacOS Safari, а не в iOS Safari

Question

Кажется, что все работает в Safari и Chrome на рабочем столе.Но iOS не сотрудничает.

Вот как я закодировал видео:

ffmpeg -an -i orig.mp4 -vcodec libx264 -crf 30 -maxrate 900 -pix_fmt yuv420p -profile:v baseline -level 3 homepage.mp4

Вот мой HTML:

<video id="bgvid" playsinline muted autoplay loop src="/assets/videos/homepage.mp4" type="video/mp4"></video>

Вот мой css:

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

Если вы хотите сами убедиться: 2606southave.com

Answer 1

Виновником является ваш CSS:

@media screen and (max-device-width: 800px) {
  #bgvid { display: none; }
}

Вы говорите, чтобы он не отображался, когда ширина составляет 800px или меньше.

---

Что касается ffmpeg, ярекомендуем добавить параметр вывода -movflags +faststart, чтобы видео могло воспроизводиться во время загрузки.Значение -maxrate указано в битах, поэтому вы, вероятно, имели в виду 900k.Ваше видео превышает ограничения для уровня 3, поэтому просто удалите -level и позвольте ему выбрать уровень.Подумайте об использовании -profile:v main вместо baseline, если вам не нужно поддерживать очень древние устройства, и вы воспользуетесь улучшенным сжатием.