Видео файл найден / работает в Chrome, а не в Safari, независимо от HTML-тега
На сайте WordPress фоновое видео загружается / воспроизводится в Chrome, а не в Safari. При дальнейшем просмотре видеофайл даже не выглядит загружающимся / работающим в сафари, например:
Эта ссылка (https://fightthenewdrug.org/wp-content/themes/salient-child/video/About_Intro_Video.mp4) загружает видео для меня в Chrome, но не в Safari. Тот же самый видеофайл, другой браузер. В Safari я получаю кнопку воспроизведения с косой чертой:
такой же точный видеофайл был загружен на мой сайт разработчиков (https://dev.ftnd.org/wp-content/themes/salient-child/video/About_Intro_Video.mp4), который размещен на той же учетной записи хостинга и работает как в Safari, так и в Chrome.
У меня все работало на сайте разработчиков, и при попытке запустить сайт вживую файлы не работают / не доступны с основного сайта.
Ответы 1
У меня была такая же проблема, и это оказалось из-за того, что мы использовали Service worker.
Safari сначала отправляет запрос диапазона байтов для тега Video, который ожидает ответа 206. Однако, если вы используете Service worker, в ответе будет 200, и похоже, что Safari не знает, как с этим справиться. Наше решение заключалось в том, чтобы исключить использование Service Worker для Safari.
Мы обнаружили это, используя вкладку сети отладчика Safari на Macbook, чтобы устранить проблему, которую мы наблюдали на iPad. Прилагаю скриншот для сравнения / справки. На левой вкладке показано, как должен выглядеть звонок по умолчанию. На правой вкладке показано, что вы бы увидели, если бы использовали Service Worker.
Это проблема, которая наблюдалась раньше и, похоже, связана с взаимодействием с конкретными серверами и Safari: stackoverflow.com/a/32998689/334402 (больше обсуждение, чем ответ). Ваше видео отлично работает в Safari, даже если вы загружаете его и воспроизводите с помощью локального сафари. Можете ли вы сообщить нам, какую серверную ОС, фреймворк и т. д. Вы используете, и можете ли вы подумать о каких-либо различиях между вашими разработчиками и действующими сайтами?