要素がCSSで読み込まれないようにしますか？

Question

私はブートストラップのビデオカルーセルで作業していて、問題が発生しました。多くの携帯端末でHTML5動画を自動再生できません。私は考えていたが、私はちょうどCSSから隠されたデスクトップと隠れたモバイルのタグを使用して、モバイル版がアニメーションGIFを使用できる間、デスクトップがmp4ビデオを実行するようにするだろう。

私が遭遇した問題は、アニメーション化されたgifが/ heavy /（〜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 

これは、1つまたは他をロードします。デスクトップの画像カルーセルをロードするオプションが必要な場合は、リンクを提供してください。 ます。また、どちらかjQueryのonloadイベントまたは準備jQueryのドキュメントを使用してStackOverflowのそれぞれにイベントリスナーに