HTML5 video tag optimisation

Question

I have Angular app , which is build and serve with node/Express server .

I use a video that user can watch

<video width="100%" height="344" controls controlsList="nodownload" preload="metadata" autoplay>
   <source src="/assets/video/digital.mp4" type="video/mp4">            
</video>

It works fine . but on slow internet it play very slowly. I want to know what can be done here so user wont get frustrated even on slow internet .

Answer 1

Instead of preload="metadata" try preload:"auto"

auto: indicates that the whole video file could be downloaded, even if the user is not expected to use it.

But again as suggested the preload attribute is not always reliable..

There are 4 solutions mentioned in this blog & the most reliable being

Solution #4, ajax and bloburl (works)

var req = new XMLHttpRequest();
req.open('GET', 'video.mp4', true);
req.responseType = 'blob';

req.onload = function() {
   // Onload is triggered even on 404
   // so we need to check the status code
   if (this.status === 200) {
      var videoBlob = this.response;
      var vid = URL.createObjectURL(videoBlob); // IE10+
      // Video is now downloaded
      // and we can set it as source on the video element
      video.src = vid;
   }
}
req.onerror = function() {
   // Error
}

req.send();