title: Prevent HTML5 videos from downloading the files on mobile - videojs
body: <p>So I'm currently building a website that has a carousel containing four videos, each video is triggered to play by hooking in to the Bootstrap 3 carousel's <code>slide.bs.carousel</code> event.</p>
  
  <p>Each of the videos are embedded in the page like so: </p>
  
  <pre><code>&lt;video id="somevideo" class="video-js vjs-default-skin m-hide" controls preload="auto" data-setup='{ "controls": false, "autoplay": false, "preload": "auto" }'&gt;
    &lt;source src="somevideo.mp4"&gt;
    &lt;source src="somevideo.webmhd.webm"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Now, given the restrictions imposed particularly by Apple on the autoplaying and preloading of HTML5 videos (both are disabled and user interaction is required to trigger playback) I've decided to omit the videos for mobile &amp; opt for static images instead. This is relatively simple, since all that's required to stop the video from overlaying the content is a media query that hides them.</p>
  
  <p>That said, I'm finding it very difficult to prevent the videos from being downloaded and the overhead is <em>massive</em>.</p>
  
  <p>For example, I have a script to check whether the user is currently visiting from a mobile device, as such, I've tried:</p>
  
  <pre><code>var check = false;
  window.mobilecheck = function() {
      // Check for mobile here
      if (check === true) {
          // Device is mobile
          var videos = document.querySelectorAll('.video-js');
          for (var i = 0; i &lt; videos.length; i++) {
              // videojs(videos[i]).destroy();
              videos[i].parentNode.removeChild(videos[i]);
          }
      }
  }
  </code></pre>
  
  <p>This successfully removes the elements, but this has to be called on DOMReady which also means the resources already begin download.</p>
  
  <p><strong>How do I stop the videos from loading on mobile?</strong> I'd like to find a solution that uses VideoJS inherently preferably.</p>