Question

我在客户端的网站上有一个HTML嵌入式视频背景，它可以在桌面上正常工作，但在移动设备上却没有，因为它需要设置更多参数。

所以我想在网站上加载网站时显示图像的背景滑块。

表示我想加载：Desktop = HTML video / Mobile-Tablet = slider。

问题是，我是如何添加滑块并使其工作的，请求？

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。

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

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

1 个答案: