桌面上的视频背景，手机上的图像是否可能？

Question

我正在尝试编写一个在桌面视图上具有视频背景的网站（这已经就位并正常运行）;但是当加载到移动设备上时，它会显示图像。

 <div class="main">      
   <video autoplay muted loop> 
   <source src="Main-Stream.mp4" type="video/mp4"> 
   </video>
  <div class="content container">
    <h1>Discover the Lifetarian Way</h1>
    <a href="x" class="btn">Purchase the Book</a>
  </div>            
</div>

Answer 1

您可以使用媒体查询将display: none设置为video元素。但是，媒体查询仅对确定页面大小很有用，因此它们只能用作启发式来确定数据是否实际成本高昂。

如果你想根据连接类型（移动/ wifi）做一些不同的事情，你需要像navigator.connection API这样的东西，但这远非标准。