移动设备，平板电脑，桌面HTML视频

Question

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

    <div class="col-xs-12 col-sm-6 center-block" >
      <div id='carousel-custom' class='carousel slide' data-ride='carousel'>
        <div class='carousel-outer'>
            <!--slider -->
            <div class='carousel-inner '>
                <div class='item active'>
                    <%= image_tag @product.images.first.image.url(:medium), 
                     class: "img-responsive", id: "" %>
                    </div>      
                    <% @product.images.drop(1).each do |image_product| %>
                       <div class='item'>
                        <%= image_tag image_product.image.url(:medium), 
                        class: "img-responsive", id: "" %>

              </div>
                <% end %>

            <script>
              $("#zoom_05").elevateZoom({ zoomType    : "inner", cursor: 
              "crosshair" });
            </script>
        </div>
        <!-- sag sol -->
        <a class='left carousel-control' href='#carousel-custom' data-
         slide='prev'>
            <span class='glyphicon glyphicon-chevron-left'></span>
        </a>
        <a class='right carousel-control' href='#carousel-custom' data-
         slide='next'>
            <span class='glyphicon glyphicon-chevron-right'></span>
        </a>
    </div>
                <!-- thumb -->
    <ol class='carousel-indicators mCustomScrollbar meartlab'>
        <li data-target='#carousel-custom' data-slide-to='0' class='active'>
            <%= image_tag @product.images.first.image.url(:medium), class: 
         "img-responsive", id: "zoom_05" %>
        </li>
        <% @product.images[1..-1].each_with_index do |image_product, index| 
           %>
            <li data-target='#carousel-custom' data-slide-to=<%= index + 1%> 
             >
                <%= image_tag image_product.image.url(:medium), class: "img-
              responsive", id: "" %>
            </li>
        <% end %>
        </li>
    </ol>
   </div>

   <script type="text/javascript">
    $(document).ready(function() {
        $(".mCustomScrollbar").mCustomScrollbar({axis:"x"});
    });
   </script>

  </div>
  </div>
  </div>

此视频的分辨率较高，大约为12mb，与手机，平板电脑和台式机上的视频相同。

我一直在使用一个名为lazysizes（https://github.com/aFarkas/lazysizes）的图像库，它非常适合根据查看位置的宽度使用不同的图像，这有助于节省大量带宽：

<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>

它们是使用JS / HTML的视频标签的等效方法吗？我可以使用移动检测库（http://mobiledetect.net/）在PHP中编写此内容，并说如果是移动设备或平板电脑，则会显示此分辨率较低的视频。我只是想知道是否有像视频lazysizes的方法。