为移动设备上的网站设置背景图像滑块

Question

我的客户网站上有一个 HTML 嵌入式视频背景，它在桌面上运行良好，但在移动设备上却不行，因为它需要设置更多参数。

所以我想在移动设备上加载网站时显示图片的背景滑块。

意味着我要加载：桌面 = HTML 视频 / 移动平板 = 滑块。

问题是如何添加滑块并使其工作？？

P.s：HTML视频的一段代码

                    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster=""> 
                    <source src="videos/video-1.webm" type="video/webm"> 
                    <source src="videos/video-1.mp4" type="video/mp4"> 
                    <source src="videos/video-1.ogg" type="video/ogg">
                    <p>Your browser does not support the video element. Try this page in a modern browser!</p>   
                    </video>

CSS：

    #video_background { 
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
    }

最好的问候:)

Answer 1

我认为您要问的是如何在移动设备中加载不同的元素来代替视频。

您可以使用@media 查询，但您会在移动设备的后台加载这两个元素。

#slider { display: none; } 
@media only screen and (max-width: 768px) {
  #video-background { display: none; }
  #slider { display:block; }
}

这将完全不受屏幕大小的影响。要更准确地定位特定设备，请look here。

或者，您可以在服务器端提供仅用于桌面的视频，而不使用太多带宽。