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视频，并且破坏了页面布局如果我这样改变顺序

            <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是否正确但图像未加载？检查路径以确保其正确。根据您所运行的服务器的类型，路由也可能与本地主机上的路由不同。

根据屏幕分辨率更改视频

1 个答案: