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

Posted 2023-03-14

【中文标题】如何为移动用户使用图片而不是视频

【英文标题】：How to us a picture instead of video for mobile users

【发布时间】：2021-12-20 05:09:54

【问题描述】：

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

【问题讨论】：

海报图片也没有加载？

这个问题似乎是一个明智的答案，实际上是在检查低功耗模式，尽管有些评论员不确定。它有帮助吗？ ***.com/questions/46670150/…

【参考方案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)

【讨论】：

谢谢你的作品！但是，我的图像与视频的大小不同。有什么办法可以使它具有相同的分辨率吗？

您可以设置图像的高度和宽度或纵横比

@TreSeibert 您可以使用Big JPG 等服务来升级您的图像。

【参考方案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;
    

【讨论】：

对不起，我对你所说的有点困惑，我是前端工作的新手。如果您有时间，您能否编写您所说的内容，将不胜感激？

看看，我更新了答案

【参考方案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;