Prevent Html5 Videos from Downloading the Files on Mobile - Videojs

Prevent HTML5 videos from downloading the files on mobile - videojs

Based on the suggestions Ian kindly made, here is my working solution.

Firstly, I changed each video's child source elements to have an attribute data-src like so:

<video id="my-id">    
   <source data-src="somevideo.mp4">
</video>

Then, after performing a mobile check using the script available at http://detectmobilebrowsers.com/ which I modified to include iPads etc (related SO answer here) I simply used the following script to automatically update the src attribute of each video (if we're on desktop in my case):

var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load(); 

And that's it! Nothing loads on mobile devices anymore and I can have fairly granular control over the devices it will or won't load on.

Hope this helps somebody.

Disable background video in resource constrained environments

The answer seems to be that no, there is no standard for this today.

(If you're reading his from the future, and this has changed, please post an answer!)

Stop video from loading in background on mobile

Assuming you're setting visibility via CSS, or in earlier JS code, you can do something like this:

1. Include data-src attributes instead of src on your video elements. No src to load if we don't need to.
2. If the video is visible, copy data-src to src
3. Now call .load() on the video element, to pick up the new values.

$(  function() {    const bgv = $('#bgvid');
    if (bgv.is(':visible')) {      $('source', bgv).each(        function() {          const el = $(this);          el.attr('src', el.data('src'));        }      );
      bgv[0].load();    }  })

.hidden-xs {  display: none;}
/* dummy criterion for demo purposes */@media screen and (min-width: 300px) {  .hidden-xs {    display: block;  }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="bgvid" class="hidden-xs " controls>  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">  <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv"></video>

/* Mobile-first */
element {
   background-image:url("small image here");
}


/* Desktop */
@media screen and (min-width: 1024px) {

  element {
     background-image:url("large image here");
  }
}