html video in browser cache

Question

I'm newbie to website development.

I used html5 video tag to insert a full screen video as the website background.

<div class="fullscreen-bg">
    <video autoplay preload="auto" class="fullscreen-bg__video">
     <source src='media/test.mp4' type="video/mp4">
        video not supported
    </video>
</div>

This works fine.

However, when I jump from the homepage to the other pages. The background will flash once (I guess it reloads the video element) and show the content.

So I want to ask is there any method to avoid the reload of the video, like save the video into browser cache.

Thank you.

The body tag in the index page is simple as following

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="current-item"><a href="#">Home</a></li>
            <li>
                <a href="#">Photography</a>

                <ul class="sub-menu">
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Artists</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Computer Vision</a>

                <ul class= "sub-menu">
                    <li><a href="projects">Project</a> </li>
        </ul>
            </li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Site Help</a></li>
        </ul>
    </nav>
</div>

<div class="fullscreen-bg">
    <video autoplay preload="auto" class="fullscreen-bg__video">
     <source src='media/test.mp4' type="video/mp4">
        video not supported
    </video>
</div>

Solution

A browser's behavior with respect to caching is controlled by certain headers on the HTTP response that delivers the item.

So, to change the caching behavior of your visitors' browsers, you'll need to configure your server to deliver specific HTTP headers along with the MP4 when it is requested.

You have a few options for which headers to use. The common ones are Expires or Cache-Control max-age, Etag and Last-Modified. I won't explain them in depth -- there are many articles that do that -- but Etag and Last-Modified are more complex but let the visitor's browser detect when your video file has changed, while Expires and Cache-Control max-age are time-based.

Of all these, I recommend Expires. It's been around in HTTP the longest(since 1.0), and it's the simplest.

Example:

Expires: Fri, 08 Jan 2020 02:32:53 GMT

However, if you expect your video might change someday, and you don't want to have to use a different filename to ensure the new video shows up, then using ETag or Last-Modified might be appropriate.