Смена видео в зависимости от разрешения экрана

Question

У меня возникла эта проблема, вы можете дать мне решение

У меня есть два видео: 1920x1080 и 1280x720, верно?

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

<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
            <source src="{{asset('static/videos/video-fisica-1920x1080.mp4')}}" media="screen and (min-width: 1919px)">
            <source src="{{asset('static/videos/video-fisica.mp4')}}" media="screen and (max-width: 1919px)">
        </video>

Дело в том, что я тестирую это на Macbook Pro Retina 13 ', и он всегда рендерит видео 1920x1080, и я ломаю страницы layout Если я изменю порядок следующим образом

            <source src="{{asset('static/videos/video-fisica.mp4')}}" media="screen and (max-width: 1919px)">
            <source src="{{asset('static/videos/video-fisica-1920x1080.mp4')}}" media="screen and (min-width: 1919px)">

video-fisica.mp4 будет отображаться

А также, с этой настройкой на моем локальном хосте работает отлично, но когда я загружен на свой сервер это не так.

video { width: 100%; }
video source { width: 100%; height: auto; }

@media (max-width:767px){.elementor-hidden-phone{display:none}}
@media (min-width:767px){.elementor-phone{display:none}}
@media (max-width: 767px) {
    header {
        background-image: url("/static/imagenes/header.jpg"); // This is actually working.
    }
}

Добавив больше к этому,

Спасибо

Answer 1

Похоже, что Safari убрал поддержку медиазапросов, чтобы определить, какой источник видео загрузить. https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr -source-media

Что касается второго фрагмента кода: когда вы говорите, что он не работает идеально, возможно, что css правильно, но изображение не не загружается? Проверьте путь, чтобы убедиться, что он правильный. В зависимости от того, на каком сервере вы работаете, маршрутизация может отличаться от вашего локального хоста.