如何根据媒体大小显示不同的视频？

我打算在网页上运行背景视频，我有不同的移动视频文件和桌面视频文件。我

<video autoplay loop muted playsinline>
  <source src="desktop.mp4" type="video/mp4">
  <source src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</video>

我见过一个媒体查询类型的解决方案，但据我所知，它超出了规范，并且不受 ios/safari 支持。

您可以使用媒体查询来使用 src 或另一个，具体取决于其定义。查看 CSS-Tricks 上的这篇文章https://css-tricks.com/video-source-by-screen-size/但它看起来并不是所有浏览器上的稳定功能。

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

正如帖子所说，另一种选择是根据视口大小使用 Javascript 更改视频 src。