在手機上爲網站設置背景圖片滑塊

我在客戶端的網站上嵌入了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

在手機上爲網站設置背景圖片滑塊

回答

相關問題