Question

我正在使用引导程序中的视频轮播，并遇到了一个问题：许多移动设备无法自动播放HTML5视频。没问题我想，我只会使用CSS中的隐藏桌面和隐藏移动标签，然后让桌面运行mp4视频，而移动版本可以使用GIF动画。

我遇到的问题是GIF动画是/重/（~3 + mb gif vs~100kb mp4）。由于我没有找到自动播放问题的解决方法，我决定现在必须使用它，但我想阻止该网站的桌面版本实际下载那些20mb的GIF，这是我的问题。怎么做？

AFAIK，使用class =“hidden-desktop”仍会下载GIF，但只是隐藏它们。有没有办法告诉浏览器只是忽略这些文件？

以下是小提琴上的样子： https://jsfiddle.net/1aasjs23/13/

  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-interval="19000" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-interval="19000" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-interval="19000" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <!-- Item 1 -->
      <div class="item active">
        <div align="center">
          <div class="hidden-phone">
            <div class="hidden-tablet">
              <video autoplay loop>
                <source src="http://bluelotusvape.com/assets/img/future_short.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <div class="hidden-desktop">
            <img src="http://bluelotusvape.com/assets/img/future_short.gif" alt="">
          </div>
        </div>
        <div class="carousel-caption">
          <h4>First Thumbnail label</h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </div>
      <!-- Item 2 -->
      <div class="item">
        <div align="center">
          <div class="hidden-phone">
            <div class="hidden-tablet">
              <video autoplay loop>
                <source src="http://bluelotusvape.com/assets/img/vape.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <div class="hidden-desktop">
            <img src="http://bluelotusvape.com/assets/img/vape.gif" alt="">
          </div>
        </div>
        <div class="carousel-caption">
          <h4>Second Thumbnail label</h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </div>
      <!-- Item 3 -->
      <div class="item">
        <div align="center">
          <div class="hidden-phone">
            <div class="hidden-tablet">
              <video autoplay loop>
                <source src="http://bluelotusvape.com/assets/img/max.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <div class="hidden-desktop">
            <img src="http://bluelotusvape.com/assets/img/max.gif" alt="">
          </div>
        </div>
        <div class="carousel-caption">
          <h4>Third Thumbnail label</h4>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>

您会注意到它同时显示gif和mp4，但它不会在浏览器中执行此操作。

Answer 1

您可以使用regx测试器对桌面进行简单的javascript解决方法：

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) 
    // Show image carousel
    else
    //load video

这将加载一个或另一个。如果要为桌面加载图像轮播选项提供链接。您也可以使用 jQuery onload 或 jQuery document ready 并将其分别包装在事件监听器中

防止使用CSS加载元素？

1 个答案: