我遇到了使用低功耗模式的移動用戶無法在我的網站上加載背景視頻的問題，我已經進行了一些研究，但似乎沒有解決此問題的方法。這讓我想到了我的問題，如何讓桌面用戶看到視頻而移動用戶看到影像？下面是我的背景視頻 ID 的 HTML 和 CSS。
#bg-video {
min-width: 100%;
min-height: 100vh;
max-width: 100%;
max-height: 100vh;
object-fit: cover;
z-index: -1;
display: block;
}
.bg-video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
} <video autoplay loop muted playsinline preload="true" id="bg-video" poster="assets/images/backvideo.png">
<source src="assets/images/course-video.mp4" type="video/mp4" />
<source src="assets/images/course-video.webm" type="video/webm" />
<source src="assets/images/course-video.ogv" type="video/ogv" />
</video>uj5u.com熱心網友回復：
您可以為此使用媒體查詢，例如：
#video {
display: block;
}
#image {
display: none;
}
@media (max-width: 720px) {
#video {
display: none;
}
#image {
display: block;
}
}<video id="video" controls>
<source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" type="video/mp4"/>
</video>
<img id="image" src="https://sample-videos.com/img/Sample-png-image-200kb.png">如果用戶的螢屏大于 720px，上面的代碼片段將顯示一個視頻，您可以在此處根據需要進行更改 @media (max-width: 720px)
uj5u.com熱心網友回復：
只是使用display: block;上<video>和display: none;對大畫面，然后display:none;就<video>和display: block;對小螢屏影像。
@media (max-width: 768px){
#video{
display: none;
}
#image{
display: block;
}
}
@media (min-width: 768px){
#video{
display: block;
}
#image{
display: none;
}
}
uj5u.com熱心網友回復：
@media only screen and (max-width: 425px){
#bg-video{
display: none;
}
body{
background-image: url("https://unsplash.it/1920/1080?random");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387169.html