요소가 CSS로로드되지 않도록 하시겠습니까?

Question

부트 스트랩에서 동영상 회전식 작업을하고 있는데 문제가 발생했습니다. 많은 휴대 기기가 HTML5 동영상을 자동 재생할 수 없습니다. 내가 생각한 문제는 CSS에서 숨겨진 데스크톱 및 숨겨진 모바일 태그를 사용한 다음 모바일 버전에서 애니메이션 GIF를 사용할 수있는 동안 데스크톱에서 mp4 비디오를 실행하게하는 것입니다.

내가 겪었던 문제는 애니메이션 gif가/heavy/(~ 3 + mb gif 대 ~ 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> 

당신은 지프와 MP4를 모두 표시합니다 것을 알 수 있습니다,하지만 브라우저에서이 작업을 수행하지 않습니다.

Answer 1

당신은 아마이 사용 REGX 테스터 같은 데스크탑 무엇인가에 대한 간단한 자바 스크립트 해결 방법을 수행 할 수 있습니다

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 온로드 또는 준비 jQuery를 문서를 사용하고 StackOverflow의 각각 이벤트 리스너에