HTML5 видеоэкран на веб-сайте WordPress не работает в браузере Safari

Question

Недавно я разработал сайт, используя тему WordPress. Вот URL сайта.

https://hbutterfly.com/

У меня есть HTML5 видео фон в разделе Hero. Видео фон работает на Firefox и Chrome. Но это не работает в браузере Safari. Пожалуйста, проверьте ниже код.

<div class="nectar-video-wrap position-loaded" data-bg-alignment="" style="opacity: 1; width: 1366px; height: 100%;">
  <div class="nectar-video-inner">
        <video class="nectar-video-bg" width="1800" height="700" preload="auto" loop="" autoplay="" muted="" playsinline="" style="visibility: visible;width: 1366px;height: 769px;opacity: 1;">
           <source src="https://hbutterfly.com/wp-content/uploads/2020/02/HB-updated-website-video_720p.webm" type="video/webm">
           <source src="https://hbutterfly.com/wp-content/uploads/2020/02/HB-updated-website-video_720p.mp4" type="video/mp4">
        </video>
  </div>
</div>

С уважением.

Answer 1

Если вы проверите консоль в Safari, вы увидите эту ошибку:

Не удалось загрузить ресурс: сервер ответил со статусом 404
https://hbutterfly.com/wp-content/uploads/2020/02/HB-updated-website-video_720p.mp4

, поскольку ваш файл MP4 не существует.

Причина, по которой ваше видео работает в некоторых браузерах, заключается в том, что и Chrome, и Firefox поддерживают формат WebM. Safari этого не делает, поэтому он должен вернуться к MP4, которого не существует.

Итак, вам просто нужно загрузить оба видеоформата.