Javascript 适用于手机、平板电脑、桌面的HTML视频

我有一个基本的视频标签，用作页面上的横幅：

<video playsinline="" autoplay="" muted="" loop="" preload="auto">
      <source src="/example.mp4" type="video/mp4">
      <source src="/example.webm" type="video/webm">
      Sorry, your browser doesn't support HTML5 video.
    </video>

抱歉，您的浏览器不支持HTML5视频。

这段视频的分辨率更高，约为12mb，与手机、平板电脑和桌面上的视频相同

我一直在使用一个名为lazysizes（）的图像库，该库非常适合根据查看图像的宽度使用不同的图像，这有助于节省大量带宽：

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

对于使用JS/HTML的视频标签，他们的方法是等效的吗？我可以用PHP编写，使用mobile detect库（）并说如果是mobile或tablet，则显示这个低分辨率视频。我只是想知道是否有一种像懒散的方法来制作视频