Prevent HTML5 videos from downloading the files on mobile - videojs

Question

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 slide.bs.caro

Answer 1

One way you could do this is by setting the src attributes of your video element via JavaScript, and only doing so based on a media query (using matchMedia).

This would mean that the bulk of your code would have to move to JavaScript though.

For example, your HTML could be something like:

And then in your JavaScript (pseudo code here, not actual JS):

if (window.matchMedia("(min-width: 640px)").matches) {
   // do nothing
} else {
   var videos = document.querySelectorAll('.video-js'),
       videoFile;
   for (var i = 0; i < videos.length; i++) {
      // Choose video type
      if (video[i].canPlayType("video/mp4") === "probably") {
         videoFile = video[i].getAttribute("data-mp4");
      }
      // do the same check for WebM here...
      video[i].src = videoFile;
      // Call whatever reload or refresh method video.js has
      // for example...
      video[i].refresh();
   }
}

Something like that might work for you, although you might have to play around a bit with it.