在手机上为网站设置背景图片滑块

我在客户端的网站上嵌入了HTML嵌入式视频背景，它在桌面上运行良好，但在移动设备上它并不是因为它需要设置更多参数。在手机上为网站设置背景图片滑块

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

我想加载的方式：Desktop = HTML视频/ Mobile-Tablet =滑块。

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

PS：在一段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; 
    }

最好的问候:)

来源

2015-09-24 Assim

也许你想设置[海报图片]（http://www.w3schools.com/tags/att_video_poster.asp）？ – David

不，我想要一个包含多个图像的滑块，而不仅仅是一张静态图像！ – Assim

没有答案？ – Assim

我想你问的是如何加载不同元素来代替移动视频。

您可以使用@media查询，但是您将在移动设备上的背景中加载这两个元素。

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

这将完全取决于屏幕尺寸。更准确地瞄准特定设备，look here。

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

来源

2015-09-24 21:03:55 Orun

谢谢你的回应，我会尝试你的提示 – Assim

在手机上为网站设置背景图片滑块

回答

相关问题