Optimizing video loading on web page

Question

I have a single page application which contains multiple video tags in each section. Height of the window is height of the section. Each tag has a different videos with the format of MP4. I want to load these videos quickly without impacting the page load time so I have tried it to load by lazy load using jquery. But the problem is size of the video file is 5MB and it takes time to load. Is any other possible way to load my first section video on page load and rest after page load completes or as background process without showing to user.

I'm using fullpage js for my single page application. It has a future for lazy loading and I'm using that for loading my video content. Like I said earlier each video is 5Mb of file size. Here is the code which used in my single page application.

<video>
  <source data-src="video.mp4" type="video/mp4" />
</video>

Answer 1

I do such tasks with lazy loading of this elements, each by each. For this you could use jQuery.Lazy and the AV plugin, to handle such tags. This is pretty easy to implement.

Instead of your original video tag:

<video>
  <source data-src="video.mp4" type="video/mp4" />
</video>

You change it to:

<video data-src="video.mp4|video/mp4"></video>

Or another way to write:

<video>
  <data-src src="video.mp4" type="video/mp4"></data-src>
</video>

Then add the two script files to your document:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/plugins/jquery.lazy.av.min.js"></script>

And initialize the plugin afterwards in you page:

<script type="text/javascript">
jQuery(function($) {
    $("video").lazy();
});
</script>

Thats all. The videos will be loaded when the user reaches the viewport. You could go any further, by shoing a loading animation or something else.