如何为移动用户使用图片而不是视频

Question

我遇到了使用低功耗模式的移动用户没有在我的网站上加载背景视频的问题，我已经进行了一些研究，似乎没有解决这个问题。这让我想到了我的问题，如何让桌面用户看到视频而移动用户看到图像？下面是我的背景视频 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>

Answer 1

您可以为此使用媒体查询，例如：

#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，上面的代码 sn-p 将显示一个视频，您可以在此处根据需要更改 @media (max-width: 720px)

Answer 2

只需在<video> 上使用display: block; 和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;
    }
}

Answer 3

@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;
  }
}